web-dev-qa-db-ja.com

createReducerを使用する場合のスライスレデューサー間のデータの共有

TypeScriptにreduxを含むReactJSアプリがあり、redux-toolkitを使用してリデューサーを構築しています。アプリが大きくなったので、レデューサーのリファクタリングを開始したいと思います。

私のredux状態は次のようになります。

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

customersスライスとordersスライスは独立しており、2つの別々のレデューサーを簡単に記述して、後でcombineReducersと組み合わせることができます。

ここで、ordersリデューサーをさらに分解したいと思います。

  • state1とstate2は完全に独立しています。
  • state3はstate1のデータに依存します。
  • state4は、state1およびstate2のデータに依存します。

createReducer内にordersを引き続き使用して、redux-toolkit（またはツールキットのその他の機能）を使用して、各ネストされたスライスにレデューサーを作成する方法はありますか？スライス？

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の使用に完全に縛られているわけではありませんが、チームがそれから離れるようにするには正当な根拠が必要です。

reactjsreact-reduxredux-toolkit
5
K Mehta

必要なすべてを減速機に渡すだけです。この場合、state1、state2、state3などを渡す代わりに、orders状態全体を渡します。

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が必要です。 （これは上記のソリューションに戻ります）。そうしないと、レデューサーは純粋な関数ではありません。

レデューサーについてあまり強調しないでください。それらは純粋な関数である必要がありますが、任意の数とタイプの引数を持つことができ、何でも返すことができます。彼らは常に「関連する州の小道具と関連する州の小道具」を厳密に一致させる必要はありません。

1
Bertalan Miklos