Изменение глубоко вложенного состояния в Redux

Question

Мой редуктор выглядит так

const INITIAL_STATE = { map:[], routes:[], road:null}; 


export default function (state = INITIAL_STATE, action){ 
    switch(action.type){ 
     case TOGGLE_ROUTE_VISIBILITY : return { ...state, routes: action.payload }; 
      break; 
     case SAVE_ROAD_ROUTE : return {...state, routes: action.payload }; 
      break; 
    default: 
     return state; 
    } 
} 

и мое действие выглядит так

export function toggleVisibility(id, routes){ 
    const i = _.findIndex(routes, o => { return o.id = id }); 
    routes[i].visible = !routes[i].visible; 
    return { 
     type: TOGGLE_ROUTE_VISIBILITY, 
     payload: routes 
    } 
} 

Так что мое состояние выглядит как

state:{ 
    base: 
     routes : [ 
      {id:1, visible:true}, 
      {id:2, visible:true}, 
     ] 
}} 

Основная проблема устанавливает данные о состоянии маршрутов. У меня такое чувство, что мой подход неверен, и есть правильный способ сохранения маршрутов в состоянии и по-прежнему иметь возможность изменять и сохранять его.

Answer 1

Я предпочитаю держать действия простыми и переместить всю логику в редукторы. Нет необходимости передавать объекты маршрута в каждое действие.

Вот простой пример

const INITIAL_STATE = {map: [], routes: [], road: null}; 

export default function (state = INITIAL_STATE, action) { 
    switch (action.type) { 
     case TOGGLE_ROUTE_VISIBILITY : 
      return Object.assign(state, { 
       routes: state.routes.map(function (route) { 
        if (route.id === action.id) { 
         route.visible = !route.visible; 
        } 
        return route; 
       }) 
      }); 
      break; 
     case SAVE_ROAD_ROUTE: 
      return Object.assign(state, { 
       routes: [ 
        ...state.routes, 
        { 
         id: action.id, // or just add some ID generator here 
         visible: true 
        } 
       ] 
      }); 
      break; 
     default: 
      return state; 
    } 
} 

Действие

export function toggleVisibility(id){ 
    return { 
     type: TOGGLE_ROUTE_VISIBILITY, 
     id: id 
    } 
} 

Также взгляните на Immutable.js, который действительно помогает в этом случае.

Answer 2

Вы должны просто передать идентификатор маршрута в своем действии. Вы можете использовать какой-то помощник по неизменности, чтобы обновить состояние в редукторе, или вы можете сделать это более вручную. Например, с помощью React update надстройки:

return update(state, { 
    base: { 
    routes: { 
     [action.payload.routeId]: { 
     visible: { 
      $apply: function (visible) { 
      return !visible; 
      } 
     } 
     } 
    } 
    } 
});