reactjs - 使用 createReducer 时在切片 reducer 之间共享数据

Question

我有一个使用 TypeScript 和 redux 编写的 ReactJS 应用程序，并且我正在使用 redux-toolkit 来构建我的 reducer 。随着应用程序变得越来越大，我想开始重构我的 reducer 。

我的 redux 状态如下所示:

{
  customers: Customers[],
  orders: {
    state1: SomeIndependentState1,
    state2: SomeIndependentState2,
    state3: SomeDependentState2,
    state4: SomeDependentState3,
  }
}

customers 和 orders 切片是独立的，我可以轻松地为它们编写两个单独的 reducer ，稍后将它们与 combineReducers 组合起来。

现在，我想进一步分解我的 orders reducer 。

• state1 和 state2 完全独立。
• state3 依赖于 state1 的数据。
• state4 取决于 state1 和 state2 中的数据。

有没有办法继续使用 redux-toolkit 中的 createReducer (或工具包中的其他一些功能)为每个嵌套切片创建化简器 在 orders 切片中？

当我开始为订单重写我的 reducer 时，这是迄今为止我所拥有的:

export const ordersReducer = (state: Orders, action: AnyAction) => {
  return {
    state1: state1Reducer(state?.state1, action),
    state2: state2Reducer(state?.state2, action),
    state3: {}, // not sure how to write a reducer for this slice and satisfy its dependency on state1
    state4: {}, // not sure how to write a reducer for this slice and staisfy its dependency on state1 and state2
  }
};

const initialState1: State1 = {};
export const state1Reducer = createReducer(initialState1, (builder) => 
  builder
    .addCase(...)
    .addCase(...)
);

const initialState2: State2 = {};
export const state2Reducer = createReducer(initialState2, (builder) => 
  builder
    .addCase(...)
    .addCase(...)
);

注意:我无法控制 redux 状态的结构。我并不完全依赖于使用 redux-toolkit，但需要一个充分的理由让我的团队放弃它。

Answer 1

只需将所有内容传递给它需要的 reducer 即可。在这种情况下，我将传递整个 orders 状态，而不是传递 state1、state2、state3 等。

export const ordersReducer = (orders: Orders, action: AnyAction) => {
  return {
    // ...
    state3: state3Reducer(orders, action),
    // ...
  }
};

const initialState3: State3 = {};
export const state3Reducer = createReducer(initialState3, (builder) => 
  builder
    .addCase(someAction, (orders, action) => orders.state3 + orders.state1) // or anything else
    .addCase(...)
);

我将state重命名为orders。我知道规范文档经常使用 state，但这很快就会变得非常困惑。

这当然是在 state3 依赖于旧 state1 的情况下。如果它取决于新值，那么您必须拥有操作中 state3 和旧 state1 所需的所有数据。 (这又回到了上面的解决方案)。如果不这样做，您的 reducer 就不是纯函数。

不要对你的 reducer 过分强调。它们必须是纯函数，但它们可以具有任意数量和类型的参数并返回任何内容。他们并不总是必须严格匹配“相关状态 Prop 与相关状态 Prop ”。