
Zustandとは
ZustandはReactの状態管理ライブラリです。
Reactの状態管理ライブラリはRedux, Recoil, Jotaiなどが有名ですが、Zustandはこの3つよりも簡単なコードで状態管理をすることができます。
Zustandの読み方と意味
英語読みだと「ズゥスタンド」、ドイツ語読みだと「チュースタンド」で、ドイツ語で「状態」を意味します。
Zustandの使い方
まず以下のコマンドでReactの環境を作成してください。
npm create vite@latest my-react-zusutand -- --template react-swc-ts
次にzustandなどをインストールしてください。
cd my-react-zusutand
npm install
npm i -D zustand
App.tsx, store.ts, Counter.tsxを用意して、以下のコードを書いてください。
App.tsx
import Counter from './Counter'
import './App.css'
function App() {
return (
<>
<h1>Vite + React</h1>
<Counter />
<Counter />
</>
)
}
export default App
store.tsに import { create } from 'zustand' でインポートして、状態管理するコードを書いています。
store.ts
import { create } from 'zustand'
type Store = {
count: number
increment: () => void
}
export const useStore = create<Store>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}))
Counter.tsxでuseStoreをインポートすれば、{ count, increment } を利用できます。
Counter.tsx
import { useStore } from './store'
function Counter() {
const { count, increment } = useStore()
return (
<div className="card">
<h1>{count}</h1>
<button onClick={increment}>
count + 1
</button>
</div>
)
}
export default Counter
これらのコードを書いた状態で「npm run dev」を実行すれば、Zustandで状態管理されているページが確認できます。
Zustandで状態管理しているので、どちらのCounterのボタンを押してもカウンターが増えることが確認できます。(useStateだと片方のみ増加)