React Native Academy · Урок

Сохранение состояния Zustand с помощью AsyncStorage

«Сохранение состояния Zustand с помощью AsyncStorage» — бесплатный урок React Native Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Native Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Native Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Why Persist State?

By default, Zustand state lives only in memory and is lost when the app closes. Persisting state means saving it to the device's local storage so it survives app restarts. This is essential for user preferences, authentication tokens, shopping carts, or any data the user expects to still be there when they reopen the app.

Installing AsyncStorage

AsyncStorage is the standard key-value storage API for React Native. In Expo managed workflow, install the community package @react-native-async-storage/async-storage. Zustand's built-in persist middleware works with any storage adapter, and AsyncStorage is the most common choice for mobile apps.

npx expo install @react-native-async-storage/async-storage

Adding the persist Middleware

Wrap the store creator with persist imported from zustand/middleware. Pass it your store factory and a configuration object with a name key (the AsyncStorage key where state will be saved) and a storage key (pointing to your AsyncStorage adapter). Zustand handles reading and writing automatically.

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const useSettingsStore = create(
  persist<SettingsStore>(
    (set) => ({
      theme: 'light',
      notifications: true,
      setTheme: (theme) => set({ theme }),
      toggleNotifications: () =>
        set((state) => ({ notifications: !state.notifications })),
    }),
    {
      name: 'settings-store',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

How Persist Works Internally

When the store is first created, persist reads from AsyncStorage and rehydrates (restores) any previously saved state before rendering the first component. When state changes via set, persist automatically serializes the state to JSON and writes it to AsyncStorage asynchronously. This all happens without any extra code in your components.

Handling the Rehydration Delay

AsyncStorage reads are asynchronous, so on the first render the store may still contain the initial state before rehydration finishes. Zustand's persist middleware adds a _hasHydrated flag and an onFinishHydration callback. Use these to show a loading screen while persisted state is loading from disk.

const hasHydrated = useSettingsStore((state) => state._hasHydrated);

if (!hasHydrated) {
  return <ActivityIndicator />; // Show loading until store is ready
}

// Alternatively, listen to hydration completion:
useEffect(() => {
  const unsub = useSettingsStore.persist.onFinishHydration(() => {
    setReady(true);
  });
  return unsub;
}, []);

Persisting Only Part of the State

You often do not want to persist everything in the store — for example, transient loading states or error messages should not be saved. Use the partialize option to select which fields to persist. The returned object contains only the keys you want to write to AsyncStorage.

persist<AuthStore>(
  (set) => ({
    user: null,
    token: null,
    isLoading: false,    // transient — don't persist
    error: null,         // transient — don't persist
    login: (user, token) => set({ user, token }),
    logout: () => set({ user: null, token: null }),
  }),
  {
    name: 'auth-store',
    storage: createJSONStorage(() => AsyncStorage),
    partialize: (state) => ({ user: state.user, token: state.token }),
  }
)

Versioning and Migration

When you change the structure of your persisted state in a new app release, old data on users' devices may not match the new shape. Use the version and migrate options to upgrade stored state from one version to the next. Increment version with each structural change and handle old state in the migrate function.

persist<SettingsStore>(
  (set) => ({ /* ... */ }),
  {
    name: 'settings-store',
    storage: createJSONStorage(() => AsyncStorage),
    version: 2,
    migrate: (persistedState: any, version: number) => {
      if (version === 1) {
        // Rename darkMode to theme in version 2
        persistedState.theme = persistedState.darkMode ? 'dark' : 'light';
        delete persistedState.darkMode;
      }
      return persistedState;
    },
  }
)

Clearing Persisted State

To clear the persisted state — for example when the user logs out — call useStore.persist.clearStorage(). This removes the data from AsyncStorage. You can also call useStore.getState().reset() to clear the in-memory state at the same time. Doing both ensures the user starts fresh on the next app launch.

async function handleLogout() {
  // Clear in-memory state
  useAuthStore.getState().logout();

  // Clear persisted state from AsyncStorage
  await useAuthStore.persist.clearStorage();

  navigation.reset({ index: 0, routes: [{ name: 'Login' }] });
}

Using SecureStore for Sensitive Data

For sensitive values like auth tokens, prefer Expo SecureStore over plain AsyncStorage. SecureStore uses the device's secure enclave (iOS Keychain / Android Keystore) to encrypt data at rest. You can create a custom Zustand storage adapter using SecureStore's getItemAsync and setItemAsync methods.

import * as SecureStore from 'expo-secure-store';

const secureStorage = {
  getItem: async (name: string) => await SecureStore.getItemAsync(name),
  setItem: async (name: string, value: string) =>
    await SecureStore.setItemAsync(name, value),
  removeItem: async (name: string) =>
    await SecureStore.deleteItemAsync(name),
};

// Use secureStorage instead of AsyncStorage:
storage: createJSONStorage(() => secureStorage),

Debugging Persisted State

To inspect what is stored in AsyncStorage during development, call AsyncStorage.getAllKeys() and AsyncStorage.multiGet(keys) in the dev console or a debug screen. You can also manually clear stale persisted state with AsyncStorage.clear() when testing migration logic. Always test with a fresh install to simulate real user upgrade scenarios.

// Debug helper — call from a dev-only screen
async function printStorage() {
  const keys = await AsyncStorage.getAllKeys();
  const pairs = await AsyncStorage.multiGet(keys);
  pairs.forEach(([key, value]) => {
    console.log(key, ':', JSON.parse(value ?? 'null'));
  });
}

Persisting a Cart Store Example

Here is a realistic cart store that persists its items list across app restarts. Loading and error state are excluded from persistence using partialize. The total is derived on the fly in the component rather than stored, so it is always consistent with the items array after rehydration.

export const useCartStore = create(
  persist<CartStore>(
    (set, get) => ({
      items: [],
      addItem: (item) => set((state) => ({ items: [...state.items, item] })),
      removeItem: (id) =>
        set((state) => ({ items: state.items.filter((i) => i.id !== id) })),
      clearCart: () => set({ items: [] }),
    }),
    {
      name: 'cart-store',
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (state) => ({ items: state.items }),
    }
  )
);

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: the persist middleware wraps a Zustand store to save and restore state from AsyncStorage automatically, partialize controls which fields are persisted to avoid saving transient loading or error state, and version with migrate handles breaking state shape changes across app updates. Next up we explore the slices pattern and Devtools integration in Zustand.

Часто задаваемые вопросы

Урок «Сохранение состояния Zustand с помощью AsyncStorage» бесплатный?

Да — полный текст урока «Сохранение состояния Zustand с помощью AsyncStorage» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Native Academy, подпишись на CoddyKit PRO. Курс React Native Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сохранение состояния Zustand с помощью AsyncStorage»?

Оберните хранилище Zustand в промежуточное ПО persist с хранилищем на основе AsyncStorage, чтобы состояние сохранялось после перезапуска приложения, и обработайте время восстановления состояния. Ты практикуешь React Native Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Native Academy?

Предыдущий опыт не требуется. React Native Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Сохранение состояния Zustand с помощью AsyncStorage»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Native Academy?

Да. Каждый урок React Native Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Создание хранилища Zustand
Чтение и обновление состояния хранилища в компонентах
Сохранение состояния Zustand с помощью AsyncStorage
Шаблон срезов и интеграция Devtools

← Назад к React Native Academy