在 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

您应该只在操作中传递路线 ID。您可以使用某种不变性助手来更新 reducer 中的状态，或者您可以更手动地完成。例如，使用 React update 附加组件：

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

Answer 2

我更喜欢让操作保持简单，并将所有逻辑移到 reducer 中。无需将路由对象传递到每个操作中。

这是一个简单的例子

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，这对这种情况很有帮助。

在 Redux 中修改深层嵌套状态

Modifying a deep nested state in Redux

reactjs

react-redux