ReduxのExampleを徹底図解
2010年代に入ってから、フロントエンドのJavascriptライブラリの群雄割拠でキャッチアップが大変ですが、どれも概念と設計が工夫されていて使っていて楽しいです。
jQueryのDOM操作はなんでもできるけど、やっているうちにDOMをちょこちょこ変更したり、何かの値を無理やりDOMのdata属性にもたせたり、コールバックをあちこちに書いたりして訳が分からなくなってきたりしますからね。
Backbone.jsが出てきてMVCを実現させてみて世間をあっと言わせたかと思えば、Angular.jsがこれだけで大抵のことはなんでもできるフルスタックなフレームワークとして登場してさらに便利になったり。
他にもKnockout.jsとかvue.jsとかいろいろありました。
Reactが登場してから、流れがReactに傾いている（使用する案件が増えている）気がします。
ReactはUIのためのフレームワークなので、データ（Reactではstateと呼ぶ）のフローを扱う仕組みが必要で、そのためのフレームワークはRedux一択になりつつあります。
Reduxの解説でよくでてくるのが、André Staltzさんの書いたこの図。
図の通りの動きをするのですが、初めてみたときはMiddlewareとかreducerとかよく分かりません。
なんとなく分かるのはViewからactionsをstoreに渡して、storeでごにょごにょして、その結果をまたViewに反映させるのだということですね。
大事なのはデータの流れが一方向だということです。
このメリットはいろいろなところで解説されていますが、要はデータの流れをわかりやすくしようということです。
そのための工夫がactionというViewから渡されるデータであったり、actionを処理してstateに反映させるreducerだったりするわけです。
reduxの公式Exampleはいろいろなパターンが用意されていて、眺めているとReduxというのものが理解できるようになっています。
ソースだけ読んでいると追っかけるのが大変なので、André Staltzさんの図にこのExampleをのっけてみましょう。
