React/Next.jsに導入する今どきの状態管理ライブラリの話

agricultural @snowcrush

Next.jsで作ってるアプリにグローバルな状態管理を入れたいんだけど、今だと何を入れるのがいいんだろう？ググると皆Redux入れてるんだけど今想定している規模感だとちょっと重い気がしてるんだよな。

agricultural @snowcrush

というかNext.jsがあんまりSPA的な使い方は想定していないのかな。そんなはずはないだろうけど、パパっと調べた感じHooksやSWR使ってますみたいな例が多い。

agricultural @snowcrush

フロントエンド触るの久しぶりだから浦島太郎過ぎて分からん…。

agricultural @snowcrush

Flux時代に戻ってEventEmitterで雑にStore書くかな…。

agricultural @snowcrush

お、react-reduxにもhooks導入されてるのか。勉強がてらこれで書いてみようかな。

agricultural @snowcrush

hooks使うと大分楽だな…。 あんなにめんどくさかったconnectが推奨されない書き方になっていて驚く。

kamedon @kamedon39

@snowcrush 個人的にはrecoilかjotaiもよいとは思ってたり。

agricultural @snowcrush

@kamedon39 recoil、jotaiですか。さらっと調べた感じcontextベースなんですね。見た目シンプルでよさげですね。flux/reduxと違ってステートが分散されないかが気になります。

kamedon @kamedon39

@snowcrush アーキテクチャ次第で、ある程度技術レベルがそろってるなら、双方向みとめちゃって、クリーンアーキテクチャとかでもよいかな。

agricultural @snowcrush

@kamedon39 個人の趣味プロジェクトなんで選定は単純に僕の好みになりますねｗ アーキテクチャはReactなんでイベントソーシングでやりたいですね。他はあんまりこだわり無いです。 Flux/Reduxで作ってたら自然にクリーンアーキテクチャっぽい依存性の入れ子が出来る気がしますが、何か特別な設計いりますかね？

kamedon @kamedon39

@snowcrush Reduxだからっていうより、何でもかんでも突っ込んで、いろんなページで、かんじがらめになり、やりたいui操作ができないのをみちゃったので、ステートとアクションの設計の熟練度がまぁまぁいるなぁって思います。

agricultural @snowcrush

@kamedon39 それは分かりますｗ 自分が最初にRedux微妙だなあって書いたのもそういう経験から来ているので。 ただ今はhooksベースで大分きれいになってるっぽいので、勉強がてらひとまずRedux試してみようと思ってます。

kamedon @kamedon39

@snowcrush 本来ローカルステートで管理したほうがよいものも、グローバル管理になりがちで、細かいuiの制御や、画面遷移が難しくなりがちなので、Reduxを上手に料理するのが難しい印象。

agricultural @snowcrush

@kamedon39 その辺はhooks使えばいいかなと思いました。最近のreact-reduxはAPIがhooksベースで（僕が使っていた当時と比べると）随分きれいになってますね。

kamedon @kamedon39

@snowcrush hooksつかってもステートとアクションの設計の話なので問題は解決してなくて。とりあえずReduxより気軽なものとして、Recoilとかをあげました。

agricultural @snowcrush

@kamedon39 ローカルステートならhooksで管理できるのでは？アクションはコンポーネントの外に投げるときに必要になるのでうちで閉じているなら関係ないように思います。 Contextとかが入ってくるとRecoilのようなライブラリが欲しくなるのは分かります。

agricultural @snowcrush

@kamedon39 あー、一つ前のツイートで書いたことの前半はreact-reduxのhooksAPIを使えばグローバル管理が前よりきれいになるという話で、後半はhooks単体で使えばローカルステートの管理はそこで閉じられますよねという話です。ややこしくてすみません。

agricultural @snowcrush

@kamedon39 前半と後半を逆に書いてしまったｗ twitter.com/snowcrush/stat… 前半はローカルステート管理の話、後半がグローバルステート管理の話です。

kamedon @kamedon39

@snowcrush 今年のアンケート結果だとこんな感じでした 2020.stateofjs.com/en-US/technolo…

kamedon @kamedon39

@snowcrush 上がってるツール粒度はあれなんだけど、Reduxは定番で新興がFacebookが作ってるRecoilなどですね。

agricultural @snowcrush

@kamedon39 やっぱGraphQLが人気なんですねー。サーバサイドからの受け取りが主眼になってきているのかな。 今作ってるやつはPWAっぽいやつで、クライアントサイドでデータ管理が閉じているのであんまりバックエンドには依存しない作りになっていますがAPI作るならGraphQLでやりたいですね