Reduxはアプリケーション全体の状態を「単一のストア」に集約し、アクションとリデューサーという純粋関数の組み合わせで状態を更新する、JavaScript向けの状態管理ライブラリです。2015年にDan Abramov（ダン・アブラモフ）とAndrew Clarkが、React Europeカンファレンスで発表したのが始まりで、Facebook（現Meta）のFluxアーキテクチャをElmの影響下で再設計したものでした。登場後すぐReactアプリの状態管理デファクトとなり、現在も大規模アプリで根強く採用されているライブラリです。
この記事の目次
- Store・Action・Reducerの三要素
- Dan Abramovが2015年に公開
- 大規模SPAでの典型用途
- Zustand・Jotaiとの違い
- まとめ
Store・Action・Reducerの三要素
Reduxの基本概念は3つしかありません。1つ目は「Store」と呼ばれる単一のオブジェクトで、アプリ全体の状態をJSONツリー1本に集約します。コンポーネントは個別にローカル状態を持つのではなく、必要に応じてストアから値を読み出し、書き換えはアクション経由でのみ行うルールに統一されます。「状態の真実は1ヶ所」という哲学が、画面間の不整合や意図しない副作用を抑え込む鍵になっています。
2つ目の「Action」は『何が起きたか』を表す単なるオブジェクトで、typeフィールドと任意のペイロードを持ちます。3つ目の「Reducer」は（現在の状態、Action）を受け取り新しい状態を返す純粋関数で、副作用を含みません。この純粋関数性により、同じ入力からは常に同じ出力が得られ、Redux DevToolsを使えばアクションの履歴を遡って状態を再生する「タイムトラベルデバッグ」が可能になります。テスト容易性と再現性が、Reduxが企業システムで支持された大きな理由です。
Dan Abramovが2015年に公開
Reduxは2015年6月、Dan Abramovがフランスで開催されたReact Europeカンファレンスでデモを行い、「Hot Reloading with Time Travel」という講演で世界中の注目を集めました。Abramovは元々ロシア出身のフロントエンドエンジニアで、Reduxを公開した直後にFacebookのReactチームへ招聘され、後にReact本体の開発者として、Hooks、Suspense、Concurrent Modeなどの設計に深く関わる人物になります。
Redux本体のコア部分はわずか数百行と非常に小さいライブラリですが、ボイラープレートが多いという批判が長く存在しました。これに応えて2019年に公式ヘルパー「Redux Toolkit（RTK）」が登場し、createSliceなどの簡略APIや、非同期処理を扱うcreateAsyncThunk、サーバ状態管理のRTK Queryなどが標準提供されるようになりました。ZustandやJotaiなど軽量ライブラリの台頭で相対的なシェアは下がったものの、大規模React案件では今も第一選択肢です。
大規模SPAでの典型用途
Reduxが最も価値を発揮するのは、「複数の画面・複数のコンポーネントから同じ状態を参照・更新する」場面です。ログインユーザーの情報や権限、ショッピングカートの中身、グローバル通知のキューなどは典型例で、コンポーネント階層が深くても親から子へpropsをバケツリレーする必要がなく、useSelectorで直接ストアから取り出せます。状態の流れが一方向に統一されるため、コードレビュー時にも変更箇所を追いやすくなります。
また、複数ステップに分かれるフォームウィザード（ECサイトの購入フロー、保険申込、転職サイトの登録など）でも、Reduxストアに途中状態を保存しておけば、ステップ間の遷移やページリロード後の復元が容易です。RTK Query以前は、サーバ通信もReduxのアクションで管理するのが一般的でしたが、現在は後述のTanStack QueryやSWRに任せ、Reduxはクライアント状態専門にする住み分けが主流になりつつあります。
Zustand・Jotaiとの違い
Reduxが「重い」と言われる主因は、ストア・アクション・リデューサー・セレクタなど登場人物が多く、コードベースが大きくなりがちな点にあります。これに対しZustandは関数1つでストアを作れる手軽さが武器で、JotaiやRecoilは「原子（atom）」単位で状態を持ち、グローバルストアを意識せず使える設計です。React 16.8で導入されたHooksとContext APIの組み合わせだけでも、ある程度の状態共有はできるようになりました。
それでもReduxが残り続けているのは、エコシステムの厚みと運用知見の豊富さゆえです。Redux DevToolsの完成度、ミドルウェア（saga、observable、thunkなど）の選択肢、数十人規模のチームで「同じ書き方を強制できる」設計強制力は、軽量ライブラリにはまだない強みです。「小さなアプリ＝Zustand／Jotai、大規模で複雑なドメイン＝Redux」という現代的な棲み分けが定着しています。
まとめ
ReduxはDan Abramovが2015年に公開し、Reactアプリの状態管理を再定義したライブラリです。単一ストアとリデューサーによる予測可能性、Redux Toolkitによる簡素化、巨大なエコシステムは健在で、新興の軽量ライブラリと棲み分けながら、大規模フロントエンド案件の中核として今も活躍しています。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント