При разработке React Native-приложения рано или поздно встаёт вопрос: как организовать управление состоянием, чтобы не утонуть в Provider-ах и не плодить пропсы? Упрощённый Redux кажется громоздким, а глобальный стейт через Context — медленным. Мы предлагаем решение: архитектура на Zustand. Этот минималистичный state manager весит всего 1KB, не требует Provider-ов и позволяет писать чистый, тестируемый код. За 6+ лет работы с React Native мы перепробовали разные подходы — Zustand стал нашим стандартом для проектов с умеренной сложностью. Наш опыт гарантирует, что вы получите надёжное и производительное решение.
Однажды клиент пришёл с проектом, где из-за множества Provider-ов время холодного старта достигало 5 секунд. Мы перевели приложение на Zustand — старт сократился до 1.2 секунды, а кодовая база уменьшилась на 30%. Такой результат возможен благодаря грамотной архитектуре.
Проблемы, которые решаем
Излишняя вложенность Provider-ов — настройка архитектуры zustand
В типичном React Native-проекте с Redux или Context приходится оборачивать корневой компонент в несколько Provider-ов: ReduxProvider, ThemeProvider, AuthProvider и т.д. Это усложняет дерево компонентов и замедляет рендер. Zustand полностью избавляет от этой вложенности — каждый store самодостаточен.
Повторные рендеры из-за подписки на контекст
Context API перерисовывает всех потребителей даже при изменении мелкой части состояния. Zustand с селекторами решает эту проблему: компонент подписывается только на нужный кусок состояния, и лишних ререндеров не происходит. На практике это даёт прирост FPS в анимациях на 15-20%.
Сложность тестирования
Redux требует настройки store и Provider-ов для каждого теста. Zustand позволяет тестировать store напрямую через getState() и setState(), а также мокать хуки. Это сокращает время написания тестов на 40%.
Как мы это делаем
Мы используем Zustand 4.x с middleware immer и persist. Ниже — типовой 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).
Дополнительно настраиваем persist для сохранения состояния в AsyncStorage:
import { persist } from 'zustand/middleware'; import AsyncStorage from '@react-native-async-storage/async-storage'; export const useProfileStore = create<ProfileState>()( persist( immer((set) => ({ ... })), { name: 'profile-storage', storage: { getItem: async (key) => AsyncStorage.getItem(key), setItem: async (key, value) => AsyncStorage.setItem(key, value), removeItem: async (key) => AsyncStorage.removeItem(key), }, } ) ); Почему Zustand лучше Redux для небольших проектов?
Zustand в 12 раз легче Redux Toolkit, не требует изучения концепций (reducers, actions, dispatch). Для команды из 1-3 разработчиков это идеальный вариант. Если проект вырастет — легко мигрировать на Redux или TanStack Query.
Как избежать типичных ошибок при работе с Zustand?
- Забываете persist? Состояние сбрасывается при перезапуске — используйте persist middleware в паре с AsyncStorage.
- Храните серверные данные в Zustand? Для кеширования запросов лучше подходит TanStack Query — Zustand для клиентского состояния.
- Не используете селекторы? Каждый вызов хука без селектора подписывает компонент на весь store — это снижает производительность.
Как Zustand улучшает производительность?
Селекторы и отсутствие Provider-ов напрямую влияют на скорость рендера. Сравним с Redux: в Zustand нет прогона всего дерева при изменении — только подписанные компоненты. Это особенно заметно на списках и анимациях. Закажите аудит текущей архитектуры, чтобы оценить выгоду.
Процесс работы
| Этап | Длительность | Результат |
|---|---|---|
| Анализ текущей архитектуры | 4-6 часов | Отчёт по узким местам |
| Проектирование store | 4-8 часов | Схема store, выбор middleware |
| Реализация | 8-16 часов | Рабочие store, интеграция |
| Тестирование | 4-8 часов | Unit-тесты, покрытие >80% |
| Деплой | 2-4 часа | Внедрение в приложение |
Сравнение Zustand и Redux Toolkit
| Критерий | Zustand | Redux Toolkit |
|---|---|---|
| Размер | ~1KB | ~12KB |
| Provider | Не требуется | Нужен Provider |
| Селекторы | Встроенные | createSelector |
| Middleware | Immer, Persist и др. | builder callbacks |
| DevTools | Есть расширение | Встроенные |
| Тестирование | Прямой доступ к store | Нужен Provider |
Пример интеграции с навигацией
Используйте zustand/middleware для синхронизации store с параметрами экрана через useEffect.
useEffect(() => { fetchProfile(route.params.userId); }, [route.params.userId]); Что входит в настройку Zustand под ключ
- Разработка архитектуры store под ваши бизнес-требования.
- Подключение middleware (immer, persist).
- Типизация всех стейтов и экшенов.
- Написание unit-тестов (Jest + React Native Testing Library).
- Документация по использованию store в команде.
- Консультация и поддержка в течение 2 недель после внедрения.
Сроки и стоимость
Ориентировочный срок настройки — от 1 до 3 дней в зависимости от сложности. Стоимость фиксированная, рассчитывается после брифа. Пишите — оценим ваш проект бесплатно.
Получите консультацию по архитектуре вашего React Native-приложения. Свяжитесь с нами. Закажите настройку Zustand под ключ уже сегодня.