使用createReducer时,在切片还原器之间共享数据



我在TypeScript中有一个带有redux的ReactJS应用程序,我正在使用redux-toolkit来构建我的减速器。随着应用程序越来越大,我想开始重构我的减速器。

我的redux状态如下所示:

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

customersorders切片是独立的,我可以很容易地为它们编写两个单独的缩减器,稍后将它们与combineReducers组合。

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

  • state1state2是完全独立的
  • CCD_ 10依赖于来自CCD_ 11的数据
  • CCD_ 12依赖于来自CCD_ 13和CCD_

是否有方法继续使用redux-toolkit中的createReducer(或工具包中的某些其他功能(为orders切片中的每个嵌套切片创建缩减器?

当我开始为orders重写我的减速器时,以下是迄今为止我所拥有的:

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,但我需要一个很好的理由让我的团队远离它

只需将所有内容传递给它需要的reducer。在这种情况下,我将通过整个orders状态,而不是通过state1state2state3等。

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并返回任何内容。他们并不总是必须严格匹配"相关国家道具与相关国家道具"。

相关内容

  • 没有找到相关文章

最新更新