Reduxのサンプルに説明をつけてみた

最近React, fluxアーキテクチャに触れることがあり、理解にかなり苦しんだので、軽く文字にして、理解を深めてみました。

今回使ったフレームワークはReduxなので、それ以外学びたい人はごめんなさい。

レポジトリはこちら。 https://github.com/masudaK/flux_sample

これから学ぶという人は、redux/counter_webpack配下のコード見れば十分だと思います。見方はREADMEに書いておいたので、ぜひ読んでください。

webpackビルド版以外にも、browserify版も置いてあります。また、webpackのほうにはAJAXで通信する処理も追加してあります。

触ってみた感想

昔HTMLやCSSはやってたし、nodeも多少は読んでいたので、ちょっと勉強すればできるだろうと思いましたが、甘かったです。かなりキツかった。どうも、fluxアーキテクチャがそうなのかもしれませんが、「そう動くんだよ、なんで知らないの」的な印象がちょくちょく感じられて、なんでストアのメソッド名前変えても実行されてるのとか、アクションとひもづけるコード書いてないけど、ストアのメソッド実行されてるとか、コンポーネントのrender()内のHTMLはトップレベルの要素一つだけにしないといけないとか、そんなの知るかーってのがよくあります。

身近にそういうことを把握している人がいないと、今回のカウンターサンプルすらまともにいじれなかったんじゃないかと。お力貸していただいたNさんありがとうございましたm(__)m

引き継ぎや誰でも触れる状態を想定する限り、現状だとなかなかfluxアーキテクチャを推奨することは難しい気はする（僕の知識レベルが低いだけなのかもしれません）のですが、いいフレームワークが出てきたら、DOM操作とかほんとしなくてもよくなるのかもしれません。とりあえず、なかなか大変でした。

今回レポジトリにあげたコードでわかりづらい箇所や何かご意見あれば、遠慮なく言ってください。よろしくお願いします。ではでは！