Zustandの使い方

Next.js で、状態管理のライブラリ Zustand があることを知り、使ってみたいと思い色々調べました。

Zustand

Zustand とは、状態管理のライブラリです。
たとえば、ログイン情報など各ページやコンポーネントなどグローバルに必要なデータを保持する際に使われます。

特徴

• シンプルなコード
• Reactのための軽量なライブラリ
• Hookを利用
• グローバルに保持
• どのコンポーネントからもアクセスできる

参照：Zustand - 公式

使い方

1. ストアの作成
下記の例では、カート情報のストアを作成しました。

• 初期状態が 0 の count
• count に1を足して更新をする addItem 関数
• count から1を引いて更新をするminusItem 関数

関数では、set コールバック関数を使い、count を更新します。
export することで、グローバルにこのストアの使用や更新をすることができます。

// カートのストア作成
export const useCartStore = create((set) => ({
 count: 0,
 addItem: () => 
  set((state) => ({
   count: state.count + 1
  })),
 minusItem: () =>
  set((state) => ({
   count: state.count - 1
  }))
}))

2. ストアの使用・更新

下記では、カートのページのように商品の現在の数量（count）を表示し、「-」と「＋」ボタンで数量の増減（addItem, minusItem）をして、count を更新しています。

const cart = () => {
 const { count, addItem, minusItem } = useCartStore()

 return (
  <div>
   <h1>Zustand Cart</h1>
   <div>Count Item {count}</div>
   <div className='d-flex gap-3'>
    <button 
     type='button'
     variant='danger' 
     onClick={useCartStore((state) => state.minusItem)}>
    -
    </button>
    
    <button 
     type='button'
     variant='danger' 
     onClick={useCartStore((state) => state.addItem)}>
    +
    </button>
   </div>
  </div>
 )
}

まとめ

Zustand は、Reactを使う上で、コード量も少なく、学習コストも少なくシンプルで使いやすい状態管理ライブラリということが分かりました。
Zustand 以外にもいろんなライブラリがあるので、機会があれば勉強してみたいと思います。

---

ご覧いただきありがとうございました

今後もフロントエンド開発で気になったことや分からないことを調べて、共有していきたいと思います。
間違いなどございましたら、教えていただきたいです。