Настройка архитектуры Zustand для React Native-приложения
Zustand — минималистичный state manager: 1KB, никакого бойлерплейта, никаких Provider-ов в корне приложения. Store создаётся в одну функцию, используется через хук. Для React Native-проектов с небольшим и средним объёмом состояния Zustand — самый быстрый способ навести порядок.
Базовый store
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
interface ProfileState {
profile: UserProfile | null;
isLoading: boolean;
error: string | null;
fetchProfile: (userId: string) => Promise<void>;
clearProfile: () => void;
}
export const useProfileStore = create<ProfileState>()(
immer((set) => ({
profile: null,
isLoading: false,
error: null,
fetchProfile: async (userId) => {
set((state) => { state.isLoading = true; state.error = null; });
try {
const profile = await userRepository.getProfile(userId);
set((state) => { state.profile = profile; state.isLoading = false; });
} catch (e) {
set((state) => { state.error = (e as Error).message; state.isLoading = false; });
}
},
clearProfile: () => set((state) => { state.profile = null; }),
}))
);
В компоненте: const { profile, isLoading, fetchProfile } = useProfileStore(). Или с селектором для предотвращения лишних перерисовок: const isLoading = useProfileStore(s => s.isLoading).
Middleware immer — удобные мутации без нарушения иммутабельности. Middleware persist из zustand/middleware — автоматическое сохранение в AsyncStorage.
Когда Zustand, а когда Redux
Zustand подходит: небольшое приложение, 1–3 разработчика, нет сложной асинхронной оркестрации. Redux Toolkit — при большой команде, нужен DevTools с историей экшнов, сложные серверные запросы через RTK Query.
Что настраиваем
Структура store-файлов по фичам. Подключение immer и persist. Типизация через TypeScript. Базовые тесты через Jest (useProfileStore.getState()).
Сроки
Настройка Zustand: 1 день. Стоимость — фиксированная, после брифа.