【React/Next.js】状態管理ライブラリ「Zustand」の使用について

Next.jsでの状態管理としてuseContextやRedux等の方法がよく使われるらしいですが、

Vuexみたいな使用感を求めてできるだけシンプルに使いたいということで条件に合いそうなZustandをつかってみました

インストール

インストールは以下で行います

yarnを使っている場合は以下となります

使う際の流れ・注意点

基本的に使う際は以下の流れでグローバルな状態管理を定義します。

【設定の流れ】

1. ストアの作成

2. 値・アクションの設定

3. ページやコンポーネントでの値・アクションの使用

【注意点】

ページ毎にグローバルな状態は定義できない？

1. ストアの作成

2. 値・アクションの設定

ページやコンポーネントでの値・アクションの使用

presist

sessionストレージの使用