基本的な使い方

基本的な使い方は、状態や更新関数を含んだ状態オブジェクトをcreate()で定義し、それを各コンポーネントで呼び出すだけです。

ストアをexportしてしまえばどのコンポーネントでも使えるようになります。

useContextやContext.Providerなどの定義は不要なので、実装コストが非常に低いです。

// javascript
import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

TypeScriptでの使い方

ほぼ同じように書けますが、TypeScriptでZustandを使う際は注意点があります。

それは、「create()のカリー化」と「ジェネリクスによる型定義」が必要なことです。

// typescript
import { create } from 'zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

カリー化について

カリー化とは、複数の引数を取る関数を、1つずつ引数を受け取る関数の連鎖に変換することです。

カリー化された関数は、func()(...)のように実行します。

const useBearStore = create<BearState>()((set) => ({})

今回で言うと、createは２通りの戻り値を持っています。

引数にストアの定義が入っていた場合、そのままcreateImpl()という関数の戻り値を返す
引数がundefinedの場合、createImpl()自体を返す

実装箇所：https://github.com/pmndrs/zustand/blob/main/src/react.ts

なぜカリー化をする必要がある？

現状のTypeScriptでは、複数のジェネリクスを受け取る時に一部の型推論が行われません（TypeScript #10571）。

これを解消するのに有効なのがカリー化です。

カリー化を行うことで、ストアの型を明示的にしてストアの定義ができるようになります。

ちなみにカリー化をしなくてもストアの定義自体はできますが、そのままmiddlewareを使おうとするとエラーになります。

（詳しくはWhy the curreyng ()(...)?）

値を永続化して保持する

「persist」というmiddlewareを使うことで、値をローカルストレージに保持することができます。

これにより、リロードやページ遷移しても値が初期化されずに済みます。

const useBearStore = create<BearState>()(
    persist(
      (set) => ({
        bears: 0,
        increase: (by) => set((state) => ({ bears: state.bears + by })),
      }),
      { name: 'bearStore' }
  )
)