code smith

開発で日々の生活をもっと楽しく

今更ながらreact学習 reduxとかsagaとか

f:id:gaku3601:20181121085852p:plain vue.jsをがりがりやってましたが、設計思想を極めるため、他フロントフレームワークを触って見ようと思いました。
そこでreactでも触って設計思想の良いとこドリッぷを模索中なのですが、作ったリポジトリとか忘れそうなので覚書で記載しておきます。

作ったもの

react basic

[作ったリポジトリ]
github.com

[installするもの]
npm install --save redux react-redux
npm install --save react-router-dom

[やったこと]
・redux
・routing
css modules

[備考]
vue.jsと違ってライブラリを組み込まないといけないので、ちょっと辛い。
css modulesはcreate-react-appのv2から標準搭載されているので、インスコする必要なし。

saga!

[作ったリポジトリ]
github.com

[installするもの]
npm install --save redux react-redux
npm install --save redux-saga
npm install --save firebase

[備考]
コミット毎にredux、saga、firebase導入と分けているので、そのコードを見れば大体わかるんじゃないかな。
sagaいい子だわ〜。これは面白い。

まとめ

vue.jsは双方向バインディング押しでvuexを使った場合、v-modelをどう扱うかですごく悩んでた。
reactを学習して思ったけど、vuexを使うならv-modelは使わない方針にしないといけない(単方向フローで実装)し、かつ、ビジネスロジックはvuexにまとめ(vuexのactions)、componentにはロジックを入れない設計にすればまぁまぁ戦えるんじゃないかと思ってる。

が、こんなこと考えないといけないvueは大きなappには向いておらず、
・prototype[2週間規模and一人開発]=vue.jsで最速構築。
・prototype→大規模[複数人開発]=react
で棲み分けすれば気持ちよくなれる気がしている。(まだreact触って2日目なので、なんともだけど
あと、create-react-appがある分、reactも昔と比べだいぶ開発しやすくなってたので、個人開発では勉強のためにreact-redux構成でちょこちょこapp開発しようと思います。(あと、react-nativeとかも最近どうなってるか見てみたい(´・ω・`)