Question

我有两个仪表板，其中包含我要在Redux中实现的相似数据和属性。见下文。

Dashboard 1 : {filters, widgets, custom}
Dashboard 2: {filters, widgets, custom}

我想这样创建我的redux状态：

{
dashboards: {
    dashboard1:{
        filter:{ // filter related stuff},
        widgets:{ // widget related state},
        custom:{ // custom state}
    },
    dashboard2: {
        filter:{  // filter related state},
        widgets:{  // widget related state},
        custom:{ // custom state}
    }
},
auth: {// auth related stuff},
...// other state keys

}

为了实现这一目标，我正在尝试将这样的组合减速器用于仪表板

// xyz.reducer.js

combineReducers({
filters: filterReducers,
widgets: widgetReducers,
custom: CustomReducers
})

现在我已经创建了一个仪表板精简器，每次用户导航到某个仪表板时都会调用它。我想基于dashboardID分配此状态。像-

const dashboardReducer = (state = defaultState, action) => {
  switch (action.type) {
    case CREATE_DASHBOARD: {
      const { payload } = action;
      return {
        ...state,
        [payload.dasboardId]: // all the combined reducer state here
      };
    }

    default:
      return state;
  }
};

有人可以建议我如何实现这一目标吗？如果有人有更好的服务，我也愿意提出建议维持这种状态结构的方法。

Answer 1

当然，只要您能够识别与xyz减速器相关的所有动作，并且有能力识别dashboardId，就可以这样做。

在您的示例中，假设来自xyz.reducer.js的嵌套化径器称为xyz：

import xyz from './xyz.reducer.js`; // or whatever

const dashboardReducer = (state = defaultState, action) => {
  switch (action.type) {
    case CREATE_DASHBOARD: {
      const { payload } = action;
      return {
        ...state,
        [payload.dashboardId]: xyz(state[payload.dashboardId], action),
      };
    }

    default:
      return state;
  }
};

比方说，您知道仪表板可能需要响应您的所有操作类型，并且它们都以dashboardId作为有效负载中的键，您可以轻松地将所有这些类型传递。

const dashboardReducer = (state = defaultState, action) => {
  switch (action.type) {
    case CREATE_DASHBOARD:
    case UPDATE_DASHBOARD_FILTER:
    case ADD_DASHBOARD_WIDGET:
    //... etc
    {
      const { payload } = action;
      return {
        ...state,
        [payload.dashboardId]: xyz(state[payload.dashboardId], action),
      };
    }

    default:
      return state;
  }
};

这有点易碎，所以您可能需要做一些假设，假设任何带有仪表板ID的有效负载都应传递给

const dashboardReducer = (state = defaultState, action) => {
  const {payload = {}} = action;
  if (typeof payload.dashboardId !== 'undefined') {
    return {
      ...state,
      [payload.dashboardId]: xyz(state[payload.dashboardId], action),
    };
  }
  return state;
};

现在，您无需保持动作类型列表，只需要确保所有相关动作创建者的有效载荷中都包含dashboardId。

如何在Redux中管理嵌套的reducer？

1 个答案: