zustand

npx expo install zustand

// src/features/cart/cartStore.ts
import { create } from "zustand";
 
type CartItem = { productId: string; qty: number };
 
type CartState = {
  items: CartItem[];
  add: (item: CartItem) => void;
  remove: (productId: string) => void;
  totalQty: () => number;
};
 
export const useCartStore = create<CartState>((set, get) => ({
  items: [],
  add: (item) =>
    set((s) => {
      const existing = s.items.find((i) => i.productId === item.productId);
      if (existing) {
        return {
          items: s.items.map((i) =>
            i.productId === item.productId ? { ...i, qty: i.qty + item.qty } : i
          ),
        };
      }
      return { items: [...s.items, item] };
    }),
  remove: (productId) =>
    set((s) => ({ items: s.items.filter((i) => i.productId !== productId) })),
  totalQty: () => get().items.reduce((n, i) => n + i.qty, 0),
}));

// Consumer - selector limits re-renders
import { useCartStore } from "@/features/cart/cartStore";
 
const qty = useCartStore((s) => s.totalQty());

// stores/preferencesStore.ts - separate domain from cart
import { create } from "zustand";
import { devtools } from "zustand/middleware";
 
type ThemeMode = "system" | "light" | "dark";
 
type PreferencesState = {
  theme: ThemeMode;
  hapticsEnabled: boolean;
  setTheme: (theme: ThemeMode) => void;
  toggleHaptics: () => void;
};
 
export const usePreferencesStore = create<PreferencesState>()(
  devtools(
    (set) => ({
      theme: "system",
      hapticsEnabled: true,
      setTheme: (theme) => set({ theme }, false, "preferences/setTheme"),
      toggleHaptics: () =>
        set((s) => ({ hapticsEnabled: !s.hapticsEnabled }), false, "preferences/toggleHaptics"),
    }),
    { name: "PreferencesStore", enabled: __DEV__ }
  )
);

// screens/SettingsScreen.tsx
import * as Haptics from "expo-haptics";
import { Pressable, Text, View } from "react-native";
import { usePreferencesStore } from "@/stores/preferencesStore";
import { useCartStore } from "@/features/cart/cartStore";
 
export function SettingsScreen() {
  const theme = usePreferencesStore((s) => s.theme);
  const hapticsEnabled = usePreferencesStore((s) => s.hapticsEnabled);
  const setTheme = usePreferencesStore((s) => s.setTheme);
  const toggleHaptics = usePreferencesStore((s) => s.toggleHaptics);
  const cartQty = useCartStore((s) => s.totalQty());
 
  function onToggleHaptics() {
    if (hapticsEnabled) void Haptics.selectionAsync();
    toggleHaptics();
  }
 
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <Text>Cart items: {cartQty}</Text>
      <Text>Theme: {theme}</Text>
      <Pressable onPress={() => setTheme(theme === "dark" ? "light" : "dark")}>
        <Text>Toggle theme</Text>
      </Pressable>
      <Pressable onPress={onToggleHaptics}>
        <Text>Haptics: {hapticsEnabled ? "On" : "Off"}</Text>
      </Pressable>
    </View>
  );
}

// stores/draftStore.ts - persist non-secret drafts (AsyncStorage)
import AsyncStorage from "@react-native-async-storage/async-storage";
import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";
 
// npx expo install @react-native-async-storage/async-storage
 
type DraftState = { text: string; setText: (text: string) => void };
 
export const useDraftStore = create<DraftState>()(
  persist(
    (set) => ({
      text: "",
      setText: (text) => set({ text }),
    }),
    {
      name: "composer-draft",
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (s) => ({ text: s.text }),
    }
  )
);

src/
  features/cart/cartStore.ts       ← domain store
  stores/preferencesStore.ts       ← cross-cutting UI prefs
  stores/draftStore.ts             ← persist middleware

import { useCartStore } from "@/features/cart/cartStore";
import { queryClient } from "@/lib/queryClient";
 
export function onLogout() {
  useCartStore.setState({ items: [] });
  queryClient.clear();
  // Also clear SecureStore tokens - see auth-session docs
}