Reduxにおけるレデューサー

前のレッスンでは、関数 createSlice を使用して、 商品用のスライス products と、storeに保存されている このスライスを更新するレデューサーを作成しました。 改めてお伝えしますが、Reduxではステートのデータは レデューサーを使用して変更されます。

レデューサーにはいくつかの制限が課せられていることを 覚えておく必要があります。レデューサーは、 受け取った現在のステートと action オブジェクトの 値に基づいてのみ状態を更新し、その後、 ステートをどのように変更するかを決定し、 新しい値を返します。

JavaScriptでは、オブジェクトと配列はデフォルトで ミュータブル（変更可能）であることを私たちは知っています。 また、stateを直接変更することはできず、 そのような場合はコピーのみを扱う必要があることも 知っています。レデューサーもこのルールに従わなければなりません。 しかし、このようなロジックを手動で記述するのは かなり面倒で複雑な作業になる可能性があり、 ここで役立つのが関数 createSlice です。 この関数はライブラリ Immer を使用し、あなたの「ミュータブルな」コードを 「イミュータブルな」コードに変換します。 したがって、罪を犯して生活を簡素化できるのは、 関数 createSlice または createReducer を使用する場合のみです。

レデューサーの制限には、非同期ロジックの使用、 ランダム値の計算、その他の 「副作用」 の実行も含まれます。 さて、レデューサーについてより詳しく理解したので、 商品アプリケーションに戻りましょう。

私たちのアプリケーションには、前のレッスンで作成した storeがありますが、今のところそこには何も入っていません。 ファイル store.js を開き、少しコードを追加してみましょう。 まず、商品用のreducer関数をインポートします:

これで、レデューサーとしてインポートした関数 productsReducer を指定できるようになります:

上記の行により、actionが発生した際に、 スライス state.products のすべてのデータが レデューサー productsReducer によって 更新されるようにstoreに指示しています。

これでアプリケーションを起動できます（コンソールの 無効なレデューサーに関する警告が消えたことに注意してください！）。 ブラウザでRedux DevToolsを開き、そのタブを探索してみてください。 たとえば、Inspectorタブ内のStateタブをクリックすると、 アプリケーション初回起動時に初期ステート値として出力された 2つの商品オブジェクトを確認できます。Log monitorタブでは、 グローバルステートが持つスライス、つまり2つのオブジェクトを含む スライス products を確認できます。 Chartタブも覗いてみてください。