在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

我更喜欢保持简单的操作，并将所有逻辑移动到减速器中。不需要将routes对象传递到每个动作中。

以下是的简单示例

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

您应该只在操作中传递路由ID。您可以使用某种不变性帮助程序来更新reducer中的状态，也可以手动执行。例如，使用React更新插件：

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