Налаштування архітектури 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 день. Вартість — фіксована, після брифу.