zustand middleware

이전에 상태관리 라이브러리로 zustand를 사용하면서 로컬스토리지에 저장되어 있는 값을 state처럼 사용하기 위해 getLocalStorage setLocalStorage removeLocalStorage 와 같은 유틸 함수를 만들고 아래와 같이 코드를 만든적이 있었다.

interface AuthState {
  authFormType: AuthFormType;
  authToken: string;
}

interface AuthAction {
  setAuthFormType: (formType: AuthFormType) => void;
  setToken: (keyname: string, authToken: string) => void;
  removeToken: (keyname: string) => void;
}

export const useAuthStore = create<AuthState & AuthAction>((set) => ({
  // state
  authFormType: "login",
  authToken: getLocalStorage<string>("authToken") || "",
  // action
  setAuthFormType: (formType) => {
    set(() => ({ authFormType: formType }));
  },

  setToken: (keyname, authToken) => {
    set(() => ({ authToken }));
    setLocalStorage(keyname, authToken);
  },
  removeToken: (keyname) => {
    set(() => ({ authToken: "" }));
    removeLocalStorage(keyname);
  },
}));

더 깔끔한 코드로 리팩토링하기 위해 깃허브와 깃허브의 docs를 참고하여 zustand의 middleware인 persist를 알게 되었고,
아래 코드와 같이 리팩토링을 진행하였다.

import { AuthFormType } from "@/components/Auth/types";
import create from "zustand";
import { devtools, persist } from "zustand/middleware";

interface AuthState {
  authFormType: AuthFormType;
  authToken: string;
}

interface AuthAction {
  setAuthFormType: (formType: AuthFormType) => void;
  setToken: (authToken: string) => void;
  removeToken: () => void;
}

export const useAuthStore = create<AuthState & AuthAction>()(
  devtools(
    persist(
      (set) => ({
        // state
        authFormType: "login",
        authToken: "",

        // action
        setAuthFormType: (formType) => {
          set(() => ({ authFormType: formType }));
        },

        setToken: (authToken) => {
          set(() => ({ authToken }));
        },
        removeToken: () => {
          set(() => ({ authToken: "" }));
        },
      }),
      {
        name: "authToken",
      }
    )
  )
);

리덕스 devtools를 지원하는 devtools미들웨어, 로컬스토리지, 세션스토리지 등 여러 스토리지와 연계되는 persist미들웨어 등 여러 미들웨어를 지원하는 zustand는 정말 좋은 상태관리 라이브러리인 것 같다.

코드 링크

링크