最近、開発を勉強しようと思って始めたのがReactでその中でReduxの概念を†完全に理解†したので備忘録としてメモを書きます。
あくまでも自分用 として書くのでご了承ください。また、間違え等ありましたらご指摘くださると幸いです。
そもそもReduxとは??
Reduxとは、Reactのライブラリの１つで(実はReact専用ではないが)、Stateをグローバルな状態に保持するのに役に立つ。
ReactHooksのuseStateは、各々のコンポーネントの状態を保持できるがそれを他のコンポーネントに伝えるためには Props を使い、順番に伝達していかなければならない。それだと、同じ状態を複数のコンポーネントで使うためには、その使用するコンポーネント全てにPropsを通して伝える必要があり、管理やメンテナンスがとても大変だった。
しかし、 その状態を同じ場所で一括に管理できるようにしたのがReduxである。
各々のコンポーネントである状態を知りたい時、同じ参照先、Reduxの言葉だとStoreを見ればよくなる。
Reduxで使う用語
大まかな概念は以上の通りなのだが、Reduxを難しく感じさせる理由はその手順、手続きにある。
例えば、あるボタンをクリックした時 count というStateを＋１したいとする。
大雑把にやりたいことを実現しようとすると、以下の様な流れが直感的だ。
(クリックしたという情報をStoreに伝える)=>(Storeにあるcountという状態を+1する)
しかし、現実には以下のような手続きを踏むことになる。
(クリックする)=>("+1したい"というActionが発行される)=>
("+1したい"というActionがStoreに伝えられる(これをdispatchという) )=>
(Storeのcountを変更するためにReducerという関数を通す)=>
(Reducerを通してできた新しいcountを値をStoreのcountに設定する)
以上のような、わけのわからない手続きを踏むことで、ようやく状態が変更されるわけだ。
しかし、偉い人が考えたのだから、めんどくさいのにもちゃんと理由がある。ここで、用語を１つづつ解説する。
・Store
上でも説明したが、ここで全体の状態を管理する。どこのコンポーネントからでもその中身に一発でアクセスできる。
ただし、読み込みは一発でアクセスできるが、書き込みは上の手続きを通さないとしてはいけない。
また、Storeは１つだけしか持ってはいけない。
・Action
これはボタンを押したり、特定のイベントが発生した時に発行される(これを実現したい!)というだけのただの命令が書かれた紙である。
・Dispatch
dispatch(action)の様なふうに使われる、Action(指令)をStoreに伝えるための伝達役だ。
・Reducer
こいつが一番えらい。 Storeの中の情報を書き換える権限を与えられた唯一のやつ。
なお、古い(現時点での)Stateとdispatchによって伝えられたやりたいActionの２つを引数にとり、新しいStateを戻り値として返す。
超簡単に書くと (OldState,Action)=>NewState を行うだけの関数。
ただし、これは純粋関数(外の情報を変更しない)である必要がある。 Reactの根本にある、関数型プログラミング的な思想を知らないと理解しにくいかもしれないが、そうすることでバグを減らせる(らしい)
また、直接Stateを変更するのではなく、コピーをとり新しい値を返すことで、
Chrome拡張のRedux Devtoolsを使いいつでもその状態を再現することができる.
まとめ
Reduxを使うためには、Reactの根本にある思想、データフローは単方向であるべしというものを理解した上でないと、理解するのが難しいかもしれない。
ちなみに初心者なので、useReducerとかとの違いはまだ知りません。