redux - 如何抽象具有相似 Action 的多个 reducer

Question

我的应用程序中有多个实体。每个实体都是独立于其他实体的。因此，我为每个实体创建了一个单独的 reducer ，并在创建商店时将所有实体组合起来。

每个条目都有一些常见的操作，例如

1) 设置项目列表2)添加单项3)更新单项4) 删除单个项目

所以几乎在每个 reducer 中我都有相同类型的代码重复

设置列表

return {
        ...state,
        list: {
            ...state.list,
            ...action.list
        }
 };

添加单个项目

return {
        ...state,
        list: {
            ...state.items,
            [action.item.id]: {
                ...state.list[action.item.id],
                ...action.item
            }
        }
 };

..更新操作和删除操作的类似代码

有没有办法抽象出这段代码，同时仍然为每个实体保留一个单独的 reducer ？

Answer 1

您可以创建Higher Order Reducer ，它将负责为您创建 reducer :

const createEntityReducer = constants => (state = {}, action) => {
  switch (action.type) {
    case constants.set:
      return {
        ...state,
        list: {
          ...state.list,
          ...action.list
        }
      };
    case constants.add:
      return {
        ...state,
        list: {
          ...state.items,
          [action.item.id]: {
            ...state.list[action.item.id],
            ...action.item
          }
        }
      };
    default:
      return state;
  }
};

基本上，我们正在创建一个函数，它将接受常量对象并返回新的reducer，当调度相应的操作时，它会更改状态。

接下来，您可以根据需要创建尽可能多的类似 reducer :

const entityReducer = createEntityReducer({
  set: "SET_ACTION_TYPE",
  add: "ADD_ACTION_TYPE"
});

const entityReducer2 = createEntityReducer({
  set: "SET_ACTION_TYPE_2",
  add: "ADD_ACTION_TYPE_2"
});

const store = createStore(
  combineReducers({
    entityReducer,
    entityReducer2
  })
);

如果您想在这些 reducer 中处理自定义操作，您可以为此创建另一个高阶 reducer :

const withCustomActions = (reducer) => (state, action) => {
  // that's the state, returned from initial reducer
  const nextState = reducer(state, action);

  switch (action.type) {
    case "CUSTOM_ACTION":
      return {
        ...nextState,
        key: action.value
      };
    default:
      return nextState;
  }
}

const entityReducer3 = withCustomActions(entityReducer);