Reduxの概念を掴む方法

React Redux

@yushimatenjinです。Reactを使用していると、Reduxとという言葉を聞くことがあると思います。Reduxのアーキテクチャは理解してしまうとかなり簡単に思えるのですが、私自身、Redux関係の記事などを見ても考え方の前提を知らなかったため少し理解に手間取ったので、自分の中で噛み砕いた結果の理解を共有したいと思います。

 

　この記事では、前提の知識の紹介などをすっ飛ばしてとりあえず自分が理解する前にこうやって噛み砕ければ良かった！いう考え方を紹介するので、少しでも理解の手助けになればと思います。

 

 

　前提：この記事Reactとのつなぎ込みなどはすっ飛ばしてとりあえず概念の理解を進める為の手助けをします。

　対象者：Reduxをこれから使うであろう方々

 

　Reduxは何をするのかというと状態を管理します。理解を深めるには現実世界と紐付けるのがかなり良いと考えているので、とりあえず現実世界にある状態を再現し、自分の脳への理解を助けたいと思います。

 

状態-1: 自分一人でファミレスで行き、テーブルへ座っている状態

　ここへReduxの基本的な概念であろう４つの概念を当てはめていきたいと思います。

Store　｜Action 　｜Dispatch　｜Reducer

この４つが理解できれば考え方が理解できればおそらくReduxの概念の理解が進むはずです。

　まず、その自分がいるファミレスが現在の状態がStoreです、よく聞くStoreです。

　その次にActionについての説明です。人間はこの中からいくつものActionを繰り出すことが出来ます。とりあえず、商品の注文をしようと思います。そのために注文のために呼び鈴を押すことが出来ます。この注文のために呼び鈴を押すこと、これがActionです。そして実際に注文のために呼び鈴を押すことがDispatchです。

　結果どうなるかというとReducerである店員の方が目の前に来ている状態ができあがります。

　その現在のファミレスの状態がActionがDispatchされたことによりReducerが反応し出来上がったStoreです。

 

　以上です、１ミリでもReduxの概念の理解が進めば光栄です

 

　この記事は@yushimatenjinによって書かれた記事です。@yushimatenjinはこの記事を書いた後に即座にReduxのリポジトリ・公式サイトを読み返しますので追記かと思います。