【React】Reduxの仕組みを1分で理解する
Reduxを理解するために、まずは仕組みを理解しましょう。
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は、鉄鋼系の会社で働いている場合は聞くこともあります。
たとえば、ケーブルが複数あるものを一つにまとめたいときに、その器具のことをReducerといいます。
上の概念図の通り、dispatch、つまり通知されたら、処理内容と前の状態を合わせて処理するという流れになります。
そして、Reduxでは、Stateをグローバルで使えるようにして、dispatchはどこでも使えるため、
どのコンポーネントからでもdispatchして、グローバルに管理されたStateを更新して、アプリケーション全体でその状態を一貫して保つことができます。