今天來分享的是：Zustand狀態管理庫

前幾天我在構建註冊／登入頁面時，已經成功透過串接 GraphQL API 從伺服器取得資料，並接收到伺服器回應的 Token。接下來需要解決的問題是如何在頁面之間切換時判斷用戶是否已登入。

如果每次都向 API 伺服器請求是否已登入，會造成過於頻繁的請求。因此，我們需要將 Token 寫入網頁的暫存區，並結合 Zustand 來進行全局狀態管理，這樣可以有效地管理整個應用的狀態。

以下是使用 Zustand 實現的 讀寫 token 的Custom hook：

import { createWithEqualityFn } from "zustand/traditional";
import { persist, createJSONStorage, combine } from "zustand/middleware";
import { deepEqual } from "fast-equals";

/** - 狀態 */
export interface State {
  /** - token */
  token: string;
}
/** - 預設狀態 */
const initialState: State = {
  token: "",
};
/** - 登入憑證 */
const useTokenStore = createWithEqualityFn(
  persist(
    combine(initialState, (set) => ({
      /** - 更改token */
      setToken(token: State["token"]) {
        if (token && typeof token === "string") {
          set({ token });
        }
      },
      /** - 清除token */
      cleanToken() {
        set({ token: initialState.token });
      },
    })),
    {
      name: "@web_token",
      storage: createJSONStorage(() => localStorage),
    }
  ),
  deepEqual
);
export default useTokenStore;

• name 在Storge 自訂義Key

在這一程式碼片段中，我們使用了 Zustand 的 persist 中介層來實現將 Token 保存到 localStorage 中。這樣在頁面之間切換時，可以直接從狀態中獲取 Token，避免每次都要向 API 伺服器發送請求，從而提升應用效能。