Question

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

我的redux状态如下：

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

customers和orders片是独立的，我可以轻松地为它们编写两个单独的化简器，以后再与combineReducers结合使用。

现在，我想进一步分解orders减速器。

state1和state2是完全独立的。
state3取决于state1的数据。
state4取决于state1和state2的数据。

是否有一种方法可以继续使用createReducer中的redux-toolkit（或工具包中的某些其他功能）来为{{1}中的每个嵌套切片创建化简器}切片？

当我开始为orders重写我的reducer时，到目前为止，这就是我的情况：

orders

注意：我无法控制我的redux状态的结构。我并不完全愿意使用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(...) );，但需要有充分的理由让我的团队远离它。

Answer 1

只需将所有内容传递给所需的减速器即可。在这种情况下，我将传递整个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操作中所需的所有数据。（这将导致上述解决方案）。如果不这样做，那么化简器就不是纯函数。

不要对减速器压力太大。它们必须是纯函数，但可以具有任意数量和类型的args并返回任何值。他们并不一定必须严格匹配“相关国家支持与相关国家支持”。

使用createReducer时在切片缩减器之间共享数据

1 个答案: