仕事でReactを使って管理するシステムを作っているのですが、Reduxが理解できずに避けて構築してしまったので
結果状態遷移が面倒くさいことになってしまいました。そして現場事情で開発から1ヶ月ぐらい開発から離れてしまったので
コメントをつけていても、ワケわからん状態になりました。

このままではいけないと思い、12月からReduxを学ぶことを決意しました。
とりあえず公式のReduxチュートリアルをやってみたら意外と簡単でした。

ただ、ReactとReduxを結ぶReact-Reduxが曲者でくじけそうになりました。
しかし先ほど集中して調べていると下記のエントリーを見つけてやっと70%ほど理解出来ました。

React+Redux入門
https://qiita.com/erukiti/items/e16aa13ad81d5938374e

頭がフル回転している内に自分なりメモとして書き出しておこうと思います。
以下、Reactでなんか作ったことがある人向けです。

そしてReact-Reduxの解説ではなく主にReactとReduxを絡めたときの簡単な処理の流れになります。

ReduxはReactから状態管理を奪い取ったモノ

Reduxってなんか複雑だなぁー React-ReduxなんてさらにReactと絡めるからまた複雑だなー
って感じで負のスパイラルが生まれて苦手意識が芽生えてしまったのは私だけでしょうか。

余計なことを考えずにこの「状態管理を奪い取ったモノ」としてみるとすごくシンプルに考えてしまえば
凄く簡単なモノだとすんなり頭の中に入ってきました。

Redux公式で仕組みをある程度理解しているからってのもあるかもしれませんが……

React-Reduxのフローチャート

Reduxの持つ機能は大きく分けて

1. viewから何のアクションが起ったかを判断する「Action」
2. 起ったアクションをstoreに伝えるための「Dispatch」
3. 状態を一元管理し、Dispatchの伝達を受け取り状態変化をする「store」
4. 変化した状態の描写とイベントを起こすことができる「View」
5. 「View」がイベントを起こすと「Action」に通知がいく(1へ戻る)

このように1-2-3-4-1とフローチャートがループしています。
Reactだけだとそれぞれのコンポーネントで処理を行えるので
どこでどの処理を行っていたかがわかり辛いのでReduxを併用するのが良いようです。

私は基本的に面倒くさがり体質なので、状態を一元管理をしたくてReduxを使う決意をしました。
それではReduxおさらいも兼ねて1から順に軽く解説します。

1. Action

個人的な解釈で説明しますと、Actionの役割は軍師でしょうか？

しかしActionという名前からして何かアクションを起こすみたいに感じますね。
Actionを起こすというよりは沢山あるActionの中から状況に応じて1つを選択するという役割です。

軍師(Action)は敵軍(View)の行動を元に、頭の中にある戦術(関数)の1つを紙に書き記します。
そしてその戦術を記した紙を伝令係(Dispatch)に渡すところまでが軍師(Action)の仕事です。

2. Dispatch

伝令役(Dispatch)は軍師(Action)から命令が来るまでは動けません。
軍師(Action)からの指令が来たら、戦術が書かれた紙を受け取り、速やかに将軍(Store)に報告するのが仕事です。

それだけ？と思いますがこれがとても重要になります。
将軍(Store)はとても疑り深い慎重な性格(としておいてください)故に、この伝令役(Dispatch)の言葉しか信頼しません。

伝令役(Dispatch)も例外ではなく、自軍の軍師(Action)の言葉しか信じていません。
そうすることにより混乱(想定外の処理)から自軍を守っているのです。

3. Store

何者の言葉も惑わされずに自軍の守りに徹するのが将軍(Store)の役割の一つです。
伝令役(Dispatch)が軍師(Action)から預かった戦術が書かれた紙を持ってきたらそれを受け取ります。

将軍(Store)はその戦術を元に自軍の部下に命令を出し、状態を変化させることが可能です。
しかし、この軍の中には敵軍(View)のスパイが紛れ込んでいます。

4. View(React)

敵軍(View)はスパイの報告により、相手の軍がどのように変化したかを知ることが出来ます。
そして、様々な行動(イベント)を選んで攻撃を仕掛けます。

5. ViewからActionへ戻る

そして、軍師(Action)は敵軍(View)の行動を常に監視している部下から報告を受け、
的確に対応できる戦術を選択し、伝令役(Dispatch)に伝えて将軍(Store)に報告させます。

Reduxは難しくない、とても簡単！

軍同士の戦いを元に例えてみましたが、私自身そこまで軍師・将軍に対する知識はありませんのでツッコミはNGで……

ゲーム的に例えてみるととても簡単に見えますね！

もちろん、それだけの処理じゃない！っていうのもありますが
基本的なReduxの処理としてはこの流れになります。

他にも非同期処理を組み込める便利な機能を追加できるミドルウェア等、
様々な拡張がReactやReduxにはあります。

私もこれを書いている現時点では全然わかってないんですよね。
知ってるけどそもそも使う場面に遭遇してないから必要性がわからないんですよ。

Reduxも個人で小規模アプリを作る分には必要ありません。
ですが使わないとどうしても面倒くさい場面にぶつかったので今回Reduxを勉強し始めました。
自分のやりたいことと、その道具(ライブラリ)が出来ることが合致すればすんなり頭に入ってくると思います。

そして、このReduxの解釈が100%合っていると私はまだ断言できるほどReduxを理解していませんし使いこなせていません。
しかしこの解釈で実際問題なく使えました。完全に理解する必要などないのです。(と自分に言い聞かせる)

Reduxの記事なんて検索すれば腐るほど出てきますが、入門記事でも小難しいことが書かれていることが大半でした。

こうやって自分でわかっているところを書き出すだけでも理解度が上がって
その小難しい記事も読めるようになるのではないでしょうか？

そしてそれを読むとさらに理解度がまた深まるのでいいことづくめですね！
やっぱりアウトプットは大事です。誰かがやっているから～で済ませるのはよくありませんね。

コピペではなく自分の言葉で書き出すことが大事です。

次回は実際にreact-reduxを使って1つ簡単なアプリを組んでみようと思います。
前半はreact-reduxが持つconnectとProviderの解説が主になりそうなので
2回に分けてやっていきましょう。