Задать вопрос
@freelancer007

Как реализовать частичное сохранение стейта с помощью Zustand?

Всем привет.
Есть задачка, частично сохранить стейт в локалстораж. Использую React 19 + Zustand 5.
Вот пример стейта:
import { create } from "zustand";
import { persist } from "zustand/middleware";

interface AuthState {
  isAuth: boolean | null;
  login: string;
  token: string | null;
  context: string | null;
  checkAuth: () => Promise<void>;
  extractLoginFromContext: () => void;
  setAuth: (isAuth: boolean, token: string, context: string) => void;
}

// Создаем Zustand Store
export const useAuthStore = create<AuthState>()(
  persist(
    (set, get) => ({
      isAuth: null,
      login: "",
      token: null,
      context: null,

      checkAuth: async () => {
        const { token, context } = get();
        if (!token) {
          set({ isAuth: false });
          return;
        }

        try {
          const response = await fetch("https://example.com/api/validate-token", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${token}`,
            },
          });

          if (response.ok) {
            set({ isAuth: true });
            get().extractLoginFromContext();
          } else {
            set({ isAuth: false, token: null, context: null });
          }
        } catch (error) {
          console.error("Ошибка проверки авторизации:", error);
          set({ isAuth: false });
        }
      },

      extractLoginFromContext: () => {
        const { context } = get();
        if (!context) return;

        try {
          const decodedContext = JSON.parse(atob(context));
          set({ login: decodedContext.login || "" });
        } catch (error) {
          console.error("Ошибка декодирования контекста:", error);
        }
      },

      setAuth: (isAuth, token, context) => {
        set({ isAuth, token, context });
      },
    }),
    {
      name: "auth-storage",
      partialize: (state) => ({
        _token: state.token,
        _context: state.context,
      }),
    }
  )
);


Код работает, но вот TS ругается, что partialize должен возвращать полный interface AuthState

Я пробовал типизировать так:
{
      name: "auth-storage",
      partialize: (state) => ({
        _token: state.token,
        _context: state.context,
      }) as Partial<AuthState>,
    }

Но не помогло.
Пробовал создать для partialize отдельный тип/интерфейс, но тоже не дало результата.
Подскажите пожалуйста, как правильно решить данную ситуацию?
  • Вопрос задан
  • 52 просмотра
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы