[初心者向け]Zustandについてざっくり理解する

Zustandとは

• Reactの状態管理ライブラリ
• Zustandを使うことで、Reactの状態をグローバルに管理できる
  • propsによるバケツリレーや、HooksのuseContextなどによる管理が不要！

Zustandの基本概念を理解

ストアとスライスの概念が理解できればOK！

例えば、ECサイトアプリの状態管理をZustandに任せるとする

ストア:ECサイトアプリ全体の状態管理

ストア = アプリケーション全体の状態を管理する場所
グローバルに共有できる状態の保管庫であり、どのコンポーネントからでもアクセス可能

下記がストアの例

const useStore = create((...args) => ({
  // ユーザー機能のスライス
  ...createUserSlice(...args),
  // 商品機能のスライス
  ...createProductSlice(...args),
  // カート機能のスライス
  ...createCartSlice(...args)
}))

スライス:各機能ごとに分けた状態管理

スライス = 機能単位で分割された状態管理の単位
関連する状態と、その状態を変更するロジックをまとめたもの

下記がスライスの例

// ユーザー関連の状態と機能
export const createUserSlice = (set) => ({
  user: null,
  login: () => set(...),
  logout: () => set(...)
})
// カート関連の状態と機能
export const createCartSlice = (set) => ({
  items: [],
  addItem: () => set(...),
  removeItem: () => set(...)
})

スライスパターン:スライスを使ってストアを構築する設計手法

スライスパターン = 複数のスライスを1つのストアにまとめる方法
機能ごとの状態管理を整理する手法

まとめ

ストアはそのアプリで使う状態をすべてまとめたもの、スライスは機能ごとに状態とその状態を変更するロジックをまとめたもの、スライスパターンは複数のスライスをまとめてストアに入れる設計方法のこと！