1分でわかるReactの状態管理ライブラリZustandの使い方

Zustandとは
Zustandの読み方と意味
Zustandの使い方

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