【zustand】環境構築

はじめに

reactの状態管理ライブラリのzustandの説明である

zustandとは

zustandは状態管理ライブラリであり小さく、シンプルに管理することができる
そしてアプリケーション全体にアクセスできるグローバルステートの管理ができる

導入方法

以下コマンドを実行し、npmでインストールする

npm install zustand

実装例

以下にサンプルを記述する

import { create, StateCreator } from "zustand";

/**
 * UserInfoState型を定義
 * userId: ユーザーのIDを保持する文字列
 * setUserId: userIdを更新する関数
 */
type UserInfoState = {
  userId: string;
  setUserId: (userId: string) => void;
};

/**
 * Zustandのストアの初期状態を設定するための関数を作成
 * userIdは初期状態では空文字列に設定
 * setUserId関数は新しいuserIdをセットする
 */
const createUserInfoState: StateCreator<UserInfoState> = (set) => ({
  userId: "",
  setUserId: (userId: string) => set({ userId: userId }),
});

/**
 * ZustandのカスタムフックuseUserInfoを作成
 * 他のコンポーネントからユーザー情報にアクセスできるようにする
 */
export const useUserInfo = create<UserInfoState>(createUserInfoState);