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

Posted 2023-02-19

【中文标题】如何使用 redux 工具包动态生成 reducer 和 action 类型？

【英文标题】：How to dynamically generate reducers and action types with redux toolkit?

【发布时间】：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 实现这一点，因为那里的案例/操作是自动创建而不是动态创建。

【参考方案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