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),
}));

// Consumidor - el selector limita re-renderizados
import { useCartStore } from "@/features/cart/cartStore";
 
const qty = useCartStore((s) => s.totalQty());

// stores/preferencesStore.ts - patrón slice + devtools en desarrollo
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__ }
  )
);
 
// stores/cartStore.ts - almacén de dominio separado
import { create } from "zustand";
 
type CartItem = { productId: string; title: string; qty: number };
 
type CartState = {
  items: CartItem[];
  add: (item: CartItem) => void;
  clear: () => void;
};
 
export const useCartStore = create<CartState>((set) => ({
  items: [],
  add: (item) => set((s) => ({ items: [...s.items, item] })),
  clear: () => set({ items: [] }),
}));
 
// --- UI ---
import * as Haptics from "expo-haptics";
import { Pressable, Text, View } from "react-native";
 
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);
 
  function onToggleHaptics() {
    if (hapticsEnabled) void Haptics.selectionAsync();
    toggleHaptics();
  }
 
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <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>
  );
}
 
export function CartBadge() {
  const count = useCartStore((s) => s.items.reduce((n, i) => n + i.qty, 0));
  return <Text>Cart ({count})</Text>;
}

// cartStore.test.ts
import { useCartStore } from "./cartStore";
 
const initial = useCartStore.getState();
 
beforeEach(() => {
  useCartStore.setState(initial, true);
});
 
test("add merges quantity", () => {
  useCartStore.getState().add({ productId: "1", title: "Pack", qty: 1 });
  useCartStore.getState().add({ productId: "1", title: "Pack", qty: 2 });
  expect(useCartStore.getState().items).toHaveLength(2); // o política de fusión por reglas de producto
});

import { create } from "zustand";
 
type BearSlice = { bears: number; addBear: () => void };
type FishSlice = { fish: number; addFish: () => void };
 
type Store = BearSlice & FishSlice;
 
export const useBoundStore = create<Store>()((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
}));
 
function createBearSlice(set: Parameters<typeof create<BearSlice>>[0]): BearSlice {
  return {
    bears: 0,
    addBear: () => set((s) => ({ bears: s.bears + 1 })),
  };
}

import AsyncStorage from "@react-native-async-storage/async-storage";
import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";
 
export const usePreferencesStore = create(
  persist<PreferencesState>(
    (set) => ({
      theme: "system",
      hapticsEnabled: true,
      setTheme: (theme) => set({ theme }),
      toggleHaptics: () => set((s) => ({ hapticsEnabled: !s.hapticsEnabled })),
    }),
    {
      name: "preferences-v1",
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (s) => ({ theme: s.theme, hapticsEnabled: s.hapticsEnabled }),
    }
  )
);

import { subscribeWithSelector } from "zustand/middleware";
 
useCartStore.subscribe(
  (s) => s.items.length,
  (len) => console.log("cart size", len)
);

npm install immer

import { immer } from "zustand/middleware/immer";
 
create<CartState>()(
  immer((set) => ({
    items: [],
    add: (item) =>
      set((state) => {
        state.items.push(item);
      }),
  }))
);