このチュートリアルに従って数値を増加させます。
これは機能しますが、今度は約 100 個の構成値に実装したいと思います。 counterSlice.js を 100 回コピーする必要がありますか、それとも数値を 100 個のプロパティを持つオブジェクトに置き換える必要がありますか?
counterSlice.js
export const counterSlice = createSlice({ 名前: 'カウンター'、 初期状態: { 値: 0、 }、 レデューサ: { インクリメント: (状態) => { // Redux Toolkit を使用すると、リデューサーに「変更」ロジックを作成できます。 Immer ライブラリを使用するため、実際には状態は変更されません。 // 「ドラフト状態」への変更を検出し、それらの変更に基づいてまったく新しい不変状態を生成します。 // さらに、これらの関数には return ステートメントは必要ありません。 状態.値 = 1 }、 デクリメント: (状態) => { 状態.値 -= 1 }、 incrementByAmount: (状態、アクション) => { 状態.値 = アクション.ペイロード }、 }、 }) // 各ケースリデューサー関数のアクションクリエーターを生成します import const { インクリメント、デクリメント、incrementByAmount } = counterSlice.actions デフォルトの counterSlice.reducerをエクスポートします。
場合によっては、ステータス フィールドごとに関数を明示的に作成することが賢明な場合があります。ただし、ステータス フィールドが約 100 ある場合は、より一般的なアプローチを取る必要があります。
リデューサー関数のペイロードに
リーリーkey
フィールドとvalue
フィールドを含めることをお勧めします。