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

Question

我正在从使用普通 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('counter/increment') 之类的 createAction 方法时，我们需要显式传递类型，即使我们使用 payload prepare 回调，我们仍然无法动态构建操作的类型。

2。无法创建减速器 cases/actions。动态

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

Answer 1

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

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

综上所述，当然你可以创建高阶函数来随意创建切片。在文档中有一个例子，它创建了一个基本的切片，上面有额外的东西：https://redux-toolkit.js.org/usage/usage-with-typescript#wrapping-createslice

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

How to dynamically generate reducers and action types with redux toolkit?

reactjs

redux

react-redux

redux-toolkit