メインコンテンツへスキップ
非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

リデューサーの前提概念

"Redux Fundamentals" Part 3: State, Actions, and Reducersで説明されている通り、Reduxのリデューサー関数は:

  • (previousState, action) => newStateというシグネチャを持つ必要があります。これはArray.prototype.reduce(reducer, ?initialValue)に渡す関数のタイプと同様です

  • 「純粋 (pure)」である必要があります。つまりリデューサーは:

    • 副作用を実行しない（API呼び出しや非ローカルオブジェクトの変更など）
    • 非純粋関数を呼び出さない（Date.nowやMath.randomなど）
    • 引数を_ミューテートしない_。リデューサーがstateを更新する場合、既存のstateオブジェクトを直接変更してはいけません。代わりに必要な変更を含む新しいオブジェクトを生成すべきです。state内のサブオブジェクトを更新する場合も同様のアプローチを取る必要があります
不変性・副作用・ミューテーションに関する注意​

ミューテーションは一般にタイムトラベルデバッグとReact Reduxのconnect機能を破壊するため推奨されません:

  • タイムトラベルでは、Redux DevToolsは記録されたアクションを再生するとstate値が出力されることを期待しますが、それ以外は変更されません。ミューテーションや非同期処理のような副作用は、ステップ間で動作が変化し、アプリケーションを破壊します
  • React Reduxでは、connectはコンポーネントの更新が必要か判断するため、mapStateToProps関数から返されるpropsが変更されたか確認します。パフォーマンス向上のため、connectはstateの不変性に依存するショートカットを採用し、変更検出に浅い参照等価性チェックを使用します。つまりオブジェクトや配列への直接的なミューテーションによる変更は検出されず、コンポーネントは再レンダリングされません

リデューサー内で一意なIDやタイムスタンプを生成するなどの副作用も、コードを予測不可能にし、デバッグやテストを困難にします

これらのルールのため、Reduxリデューサーを整理する他の特定の技術に進む前に、以下の核心概念を完全に理解することが重要です:

Reduxリデューサーの基礎​

主な概念:

  • stateとstate構造の観点で考えること

  • stateのスライスごとに更新責任を委譲すること（リデューサーの合成）

  • 高階リデューサー (Higher order reducers)

  • リデューサーの初期stateの定義

参考文献:

純粋関数と副作用​

主要概念:

  • 副作用

  • 純粋関数

  • 関数の合成という観点での考え方

参考資料:

不変データ管理​

主要概念:

  • 可変性 vs 不変性

  • オブジェクトと配列の安全な不変更新

  • 状態を変更する関数や文の回避

参考資料:

データの正規化​

主要概念:

  • データベース構造と組織化

  • リレーショナル/ネストしたデータの分割

  • アイテムの単一定義の保存

  • IDによるアイテム参照

  • IDでキー化したオブジェクトをルックアップテーブルとして使用、順序追跡用にID配列を使用

  • 関係性におけるアイテムの関連付け

参考資料: