如何使用 redux 工具包动态生成 reducer 和 action 类型？答案

【问题标题】：How to dynamically generate reducers and action types with redux toolkit?如何使用 redux 工具包动态生成 reducer 和 action 类型？
【发布时间】：2021-10-28 12:47:19
【问题描述】：

我正在从使用普通 redux 过渡到使用 redux 工具包，但我遇到了以下无法过渡的场景：

简单的 Redux：

const openEntityScreen = (payload: any) => {
  var { module, entity, operation } = payload;
  return {
    type: `entityScreen/${module}/${entity}/${operation}/open`
  }
}

然后我有一个reducer creator..

export default function (module, entity, operation, initialState) {
  return (state, action) => {
    switch (action.type) {
      case `entityScreen/${module}/${entity}/${operation}/open`: {
        ...
        return {
          ...state,
          ...
      }
      default: return state
    }
  }
}

我注册的是这样的：

var someEntityScreenReducer = createEntityScreenReducer(
  'someModuleName', 
  'someEntityName',
  'someOperationName',
  someState
);

然后将这个reducer分配给负责'someModuleName'、'someEntityName'等的状态部分。

基本上这样我就可以为不同的模块和实体等快速创建多个减速器。

因此，当尝试使用 redux 工具包转换此逻辑时，存在 2 个主要问题：

1.我无法使用动作的有效负载动态构建动作的类型。

当使用 createAction 方法（例如 createAction('counter/increment')）时，我们需要显式传递类型，即使我们使用负载准备回调，我们仍然无法动态构建操作的类型。

2。无法创建减速器案例/操作。动态

在上面的示例中，我们使用传递的 reducer 创建者参数构建案例。我无法使用 createReducer 函数来实现这一点，因为我们使用预构建操作来映射或使用构建器创建案例，我也无法使用 createSlice 实现这一点，因为那里的案例/操作是自动创建而不是动态创建。

【问题讨论】：

标签： reactjs redux react-redux redux-toolkit

【解决方案1】：

老实说，这听起来好像您只是将所有组件本地 UI 状态放入 Redux，我们通常不建议这样做。 https://redux.js.org/style-guide/style-guide/#evaluate-where-each-piece-of-state-should-live

在大多数情况下，Redux 切片彼此之间非常不同。如果它们与您描述的一样相似，您可能还可以使用一个归一化器将所有数据保存为标准化形状。

说了这么多，当然你可以创建高阶函数来随意创建切片。文档中有一个示例，它创建了一个基本切片，顶部有额外的东西：https://redux-toolkit.js.org/usage/usage-with-typescript#wrapping-createslice

【讨论】：