Reduxの概要と概念
はじめに
本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。
書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。
Redux
Reduxはイベントである”アクション”を使用してアプリケーションの状態を管理するためのライブラリです。
アプリケーションの状態は一つの大きなオブジェクトとしてストアに保持されます。
これにより、状態の管理が一元化され、状態の予測性とデバッグが容易になります。
Reduxが役に立つケース
すべてのアプリに Redux が必要なわけではありません。特に以下のようなケースで役立ちます。
大規模なアプリケーション
Reactでは、親から子への一方通行のデータフローが基本ですが、大規模なアプリケーションでは多数のコンポーネントが存在し、親子の深い階層構造が形成されることでデータのバケツリレーが大量に発生する可能性があります。
Reduxを使用すれば、各階層を通してデータを渡す必要もなくなるため、管理がしやすいです。
共有状態が必要なアプリケーション
Reduxは全ての状態を一元的に管理します。これにより、どのコンポーネントからでも容易にアクセスでき、共有状態の管理が容易になります。
状態の変化を厳密に管理したい場合
ReduxはFluxアーキテクチャに基づいており、データが一方向に流れるため、状態の変化を予測しやすいです。
また、Reduxは"Actions"という概念を通じて状態の変化を厳密に管理します。
これにより、状態がどのように変化したか、どの操作によって変化したかを簡単に把握することができます。
状態
下記はReduxを使用していないuseStateを利用した一般的な状態管理の例です。
function Counter() { // State: a counter value const [counter, setCounter] = useState(0) // Action: code that causes an update to the state when something happens const increment = () => { setCounter(prevCounter => prevCounter + 1) } // View: the UI definition return ( <div> Value: {counter} <button onClick={increment}>Increment</button> </div> ) }
上記は単方向データフローの一例です。
引用: https://redux.js.org/tutorials/essentials/part-1-overview-concepts
State
Stateはアプリケーションの現在の状態、ある特定の時点でのアプリケーションの「記憶」を指します。
例えば、選択された項目、ユーザーが入力したテキストなど、アプリケーションが動作するために必要なデータがStateに含まれます。
Stateは通常、変化する可能性があるデータを含むため、それに基づいてUIが動的に更新されます。
たとえば、ユーザーがテキストボックスに新しいテキストを入力すると、そのテキストはStateに保存され、それを表示するUI部分が更新されます。
View
ViewはStateに基づいてレンダリングされるユーザーインターフェースを指します。
ボタン、テキストボックス、リストなどのUI要素もそうです。
Viewは常に現在のStateに基づいて表示され、Stateが変更されるとViewも自動的に更新されます。
Actions
Actionsはアプリケーションで何かが起こったとき（ユーザーがボタンをクリックしたとき、APIから新しいデータが到着したときなど）に発生するイベントを指します。
Actionsは、アプリケーションのStateを更新するためのトリガーとして機能します。
Actionが発生すると、それに応じてStateが更新され、その結果、Viewが更新されます。
これにより、ユーザーが何かを行うたびに（または他のイベントが発生するたびに）、UIが適切に反応して更新されます。
状態管理の課題
同じ state を共有して使用する必要がある複数のコンポーネントがある場合、特にそれらのコンポーネントがアプリケーションの異なる部分に配置されている場合、この単純さは崩れる可能性があります。
これを解決する 1 つの方法は、コンポーネントから共有状態を抽出し、それをコンポーネント ツリーの外側の一元的な場所に置くことです。
状態管理に関連する概念を定義および分離し、ビューと状態の間の独立性を維持するルールを適用することで、コードの構造と保守性が向上します。
これが Redux の背後にある基本的な考え方です。
参考
- モダンJavaScriptの基本から始める React実践の教科書
- https://redux.js.org/tutorials/essentials/part-1-overview-concepts
続く…
コメント
本記事の内容は以上になります！
書籍の続きのアウトプットも随時更新したいと思います。
プログラミングスクールのご紹介 (卒業生より)
お世話になったプログラミングスクールであるRUNTEQです♪
こちらのリンクを経由すると１万円引きになります。
RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。
もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。
