この記事は、ReduxのStore・State・Action・Dispatch・Reducerの間でデータがどう流れるか、という「仕組み」を図とたとえ話で理解するための記事です。
そもそもReduxとは何か、なぜ使うのか、useStateやContextで足りるのはどんな場合か、といった「使う意味と判断」は、Reduxとは？Reactで使う意味・不要なケースにまとめています。ここでは動きだけに絞ります。
結論から書くと、Reduxのデータの流れは一方向で、「UIで操作 → Actionをdispatch → Reducerが以前のStateとActionから新しいStateを作る → Storeが更新され、UIが再描画される」の繰り返しです。
Reduxの仕組みを３分で理解する
引用: https://redux.js.org/tutorials/essentials/part-1-overview-concepts
上の図は、Reduxの公式サイトより引用しているものです。
上の図にでてくる大事なキーワードがいくつかあります。
- Store
- State
- Dispatch
- Reducer
- Action
Storeは、コンビニ
Storeは、コンビニのように、商品（データ）を保管している場所のことです。
Stateは、商品(データ)の状態
Stateは、商品(データ)の状態です。
UIは、お客さんが商品を選んで取れるようにするための商品棚です。Webならクリックするためのボタン、タップするためのボタン、ホバーするための画像などです。
Event Handlerは処理内容
Event Handlerは、イベント（出来事）をHandle(処理する)ことです。Webならクリックされたらどうする、という処理内容のことです。
Dispatchは、処理内容(Action)を通知する
Dispatchは、処理内容(Action)をStoreに通知することです。
dispatchという言葉は、他業種でも用いられます。
海外に商品を出荷するときにdispatchという言葉を使って「商品が出荷されました」という通知をします。
Reducerは、以前の状態と、処理内容をあわせて新しい状態に更新すること
Reducerは、以前の状態(State)と、処理内容(Action)をあわせて新しい状態に更新することをいいます。
たとえば、コンビニでお茶が棚に5本あって、1本をお客さんが取ったら残り4本になります。自然界では当たり前ですが、
Webで実現しようとすると、5本という以前の状態とお客さんが取った数分減らすという処理内容を合わせて処理する必要があります。
これをReducerがやります。
Reducerという言葉は、配管で太い管と細い管をつなぐ継手の名前としても使われます。複数の入力を1つにまとめる、という意味では同じです。
上の概念図の通り、dispatchで通知されたら、処理内容と前の状態を合わせて処理する、という流れになります。
Reducerは「以前のStateとActionを受け取り、新しいStateを返すだけ」の関数で、以前のStateを直接書き換えません。この決まりがあるおかげで、どの操作でStateがどう変わったかを順番に追え、Redux DevToolsで1つ前の状態に戻すこともできます。
そして、Reduxでは、Stateをグローバルで使えるようにして、dispatchはどこからでも呼べるため、
どのコンポーネントからでもdispatchしてグローバルに管理されたStateを更新し、アプリケーション全体でその状態を一貫して保てます。
この流れを実際のコードで書くときは、現在はRedux ToolkitのcreateSliceでReducerとActionをまとめて定義するのが標準です。どんなときにReduxを選ぶべきか、Redux Toolkitの最小構成はReduxとは？Reactで使う意味・不要なケース・Redux Toolkitで続けて確認できます。