フロントエンドアプリケーションにおいて状態をどこに置くべきか論 - Runner in the High

後学のために自分の考えていることをまとめてみる。 考えられるパターン これまでの経験から以下4つのパターンがある。 ローカルStateでprop-drillingする ローカルStateかつイベント経由でデータ交換をする グローバルStoreとローカルStateを併用する グローバルStoreのみを使用する 1. ローカルStateでprop-drillingする propとしてコンポーネント間のデータをやりとりする手法。 ほぼすべてのUIコンポーネントを親からデータを受け取りDOMを出力するだけの純粋な関数として表現できるため、全体の設計自体はシンプルになる。手間は多いが魔法は少ない。 コンポーネントの粒度が小さいアプリケーションの場合にはいわゆるバケツリレーと揶揄されるデータの受け渡しが頻発し、これに嫌悪感を持つエンジニアもいる。 2. ローカルStateかつイベント経由でデータ交換を

[IzumiSy]

書いた

[knjname]

4番と言っても流石に画面コンポーネント個別のどうでもいい内部状態をグローバルストアに入れるようなのは違うと思う　あと状態管理ライブラリの違いで見え方が違う

[monorod]

個人的には3番一択だと思ってる、storeに持つべきものとstateに持つべきものの区別すらつかない人は単純にスキルが足りないだけじゃないかと思う。 stateって要はプライベート変数みたいなもんだし

[snowcrush]

1って一つのコンポーネントにステート管理を集約すると結局そのコンポーネントがGlobalなStoreにならない？

[atico]

そのコンポーネントしか使わないのであれば、localのstate。AomicDesignで作っていれば、globalなstateはpagesがcontext等を使って実現。templatesやorganismsがglobalなstateにアクセスしたい時は、containerとpresentationalでコンポーネントを分割

[ultimatebreak]

正解はないよなあこれ

[Keisuke69]

3が多いかな

[komutan1]

正解はないけど後から作り直す余裕があるなら1から始めて順に引き上げる。作りっぱなしなら最初から4で始める。

[ledsun]

わかる