はじめてReduxに触れるための基礎

はじめに

Reactを使ってアプリの開発を行っているとReduxという単語を目にするようになった。
知らなくてもコードを書くことはできるが、開発をする上で知っておいた方がいいと思ったので調査した。
手探りの状態で調査をしているので認識違いがあったら指摘していただけると幸いです。

Reduxとは何か

Reduxとは、状態（state）管理フレームワークである。
状態管理フレームワークはアプリケーション内におけるデータの流れを管理するものである。
状態管理フレームワークを導入することで、開発の規模が大きくなったときにデータの流れを見失いづらくすることができる。

Redux以外の方法で状態管理を行う手法として、

• MobX
• Almin

のようにライブラリを使ったものもあれば、

• ローカルステート(useState, useReducer等)を使った管理
• HooksAPIのuseReducer, useContextを使った管理

のようにReactの機能を使用して独自で実装するもの等がある。

なぜReduxは登場したか

Reduxが登場した背景として、Facebookが提唱したFluxという設計思想の出現がある。
FluxはMVCパターンの問題を解決するために提唱された。
MVCパターンで開発する場合、開発規模が拡大するとモデルやビューの依存関係が複雑化しデータの流れの管理が難しくなってしまう。
Fluxではデータの流れを「Action→Dispatcher→Store→View」という単一方向の流れに限定することで管理をしやすくしている。

ただFluxという設計は特定の実装方法を強要するものではないため、Fluxを実現するために様々な手法が検討され、その一つとしてReduxが誕生した。

Reduxの特徴

Reduxの特徴として、FluxにあったDispatcherが存在しない。(「Action→Store→View」)
ActionがStateを更新する際にはStore内のReducerと呼ばれる関数を使う。

また以下の三原則が存在する。

• Single source of truth
  • アプリケーション全体の状態(state)を単独のオブジェクトとしてStoreに保存する。デバッグを容易にしたり、undo/redoの実装を容易にすることができる。
• State is read-only
  • stateは読み取り専用であり、stateを更新するにはActionをStoreにdispatchする必要がある。Viewから直接stateが変更されないことが保証されるため、テストやデバッグの際にオブジェクトであるActionを利用すればいい。
• Changes are made with pure functions
  • ReducerはActionとstateから新たなstateを作る純粋な関数である。

Reduxのデメリット

• シンプルなアプリケーションの場合オーバースペックになる可能性がある。
  • データの流れが複雑でないアプリケーションでReduxを使用すると、不必要に複雑な実装になってしまう。
  • CustomHookを使えばより工数の少ないシンプルな実装をすることが可能な場合もある。

参考文献

1. ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA
2. SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
3. アプリの状態管理を安全に行うためのFluxとRedux (1/3)：CodeZine（コードジン）
4. Facebook の決断：MVCはスケールしない。ならば Flux だ。
5. Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
6. 結局FluxやらReduxやらって何なのか個人的なまとめ - Qiita
7. 無理してReduxを使わずに、Custom Hookで楽に状態を管理する