Setting up Zustand Architecture for React Native Applications
Zustand is a minimalist state manager: 1KB, no boilerplate, no Provider in app root. Store is created in one function, used via hook. For React Native projects with small to medium state volume, Zustand is the fastest way to organize.
Basic 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; }),
}))
);
In component: const { profile, isLoading, fetchProfile } = useProfileStore(). Or with selector to prevent unnecessary rerenders: const isLoading = useProfileStore(s => s.isLoading).
Middleware immer — convenient mutations without violating immutability. Middleware persist from zustand/middleware — automatic AsyncStorage saving.
When Zustand, When Redux
Zustand suits: small application, 1–3 developers, no complex async orchestration. Redux Toolkit — for large team, need DevTools with action history, complex server requests via RTK Query.
What We Configure
Store file structure by features. Connect immer and persist. TypeScript typing. Basic tests via Jest (useProfileStore.getState()).
Timeline
Zustand setup: 1 day. Cost — fixed, after brief.