【React】zustandのpersistで独自のstorageを使用したい

概要

状態管理のライブラリzustandでは、Persisting store dataのドキュメントにある通り、状態の値を永続化する機能があります。標準だとlocalStorage、sessionStorageが用意されているようですが、cookieなど他のstorageを使用したい場合はどうすればよいかのメモ書きです。

前提

• 使用したzustandのバージョンは4.5.5です。

対応方針

Is it possible to use cookies for as a persist storage?のdiscussionsにある通り、別途StateStorageのinterfaceの実装を用意して、それを設定することで実現できます。

実装サンプル

上記の記事と同様に、cookieで実装する場合のサンプルは以下の通りです。

import { getCookie, setCookie, removeCookie } from "typescript-cookie";
import { create } from "zustand";
import { createJSONStorage, persist, StateStorage } from "zustand/middleware";

const cookiesStorage: StateStorage = {
  getItem: (name: string) => {
    return getCookie(name) ?? null;
  },
  setItem: (name: string, value: string) => {
    setCookie(name, value, { expires: 1 });
  },
  removeItem: (name: string) => {
    removeCookie(name);
  },
};

type SampleTokenType = {
  sampleToken: string | undefined;
  updateSampleToken: (token: string) => void;
  removeSampleToken: () => void;
};

export const useSampleTokenStore = create(
  persist<SampleTokenType>(
    (set) => ({
      sampleToken: undefined,
      updateSampleToken: (token) => set({ sampleToken: token }),
      removeSampleToken: () => set({ sampleToken: undefined }),
    }),
    {
      name: "test-storage",
      storage: createJSONStorage(() => cookiesStorage),
    }
  )
);