Zustandの理解
状態管理は、しばしば複雑すぎると感じられます。
ReactのuseStateの使い方は知っています。propsの渡し方も、状態を上に持ち上げる（lift state up）方法も知っています。
しかし、アプリが成長するとすべてが崩れ始めます。必要のないコンポーネントを経由してデータを渡し始めるようになります。これがprop drillingです。これにより、コードは乱雑になり、メンテナンスが困難になります。
Zustandはこれを解決します。Reactコンポーネントの外側に、アプリの共有状態を提供します。
次のように考えてみてください：
Zustandを使わない場合： コンポーネントAがBにpropsを渡し、BがCに、CがDに渡します。
Zustandを使う場合： すべてのコンポーネントが中央のストアと直接やり取りします。仲介者は不要です。prop drillingも発生しません。
Zustandのストアは2つの要素で構成されます：
- State: データ。
- Actions: データを変更する関数。
それだけのことです。
Zustandが高速な理由は、変更された特定のデータを使用しているコンポーネントのみを再レンダリングするからです。
ページをリフレッシュしてもデータを保持したい場合は、localStorageを使用してください。localStorageは文字列しか保存できないため、オブジェクトを保存するにはJSON.stringifyを、読み取るにはJSON.parseを使用する必要があります。
認証（auth）ストアを構成する簡単な方法は以下の通りです：
- ユーザーとトークンをlocalStorageに保存する。
- ログイン関数を使用して、ストアとブラウザのストレージの両方を更新する。
- ログアウト関数を使用して、両方をクリアする。
Reduxと比較するとどうでしょうか？
Reduxはディスパッチャー（dispatcher）とリデューサー（reducer）を必要とし、多くのボイラープレートコードが発生します。Zustandは関数を直接呼び出すことができます。思考のオーバーヘッドが少なく、セットアップも簡単です。
避けるべき一般的な間違い：
- create関数内でオブジェクトの返却を忘れる。オブジェクトを括弧で囲んでください。
- stateオブジェクト内でセミコロンを使用する。代わりにカンマを使用してください。
- すでに文字列であるデータをパースする。
状態管理ライブラリの本質は、状態を管理することではなく、複雑さを管理することにあります。
すべてのAPIを暗記しようとするのはやめましょう。そのツールが解決しようとしている問題に目を向けることから始めてください。問題を理解すれば、ツールの使い方は自然と理解できます。
Source: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11