Zustand

Zustand

Zustand: A Minimal Store

Zustand 58,763 (https://github.com/pmndrs/zustand 58,763 ) (MIT) keeps state in a store outside React 7,897 and gives you a hook to read it, with no provider to mount. Install it with this section's other libraries; npx expo install picks SDK 57's version of AsyncStorage 5,070 , a native module used in Persisting Zustand State:

Installing Zustand, TanStack Query and AsyncStorageShell

npx expo install @tanstack/react-query zustand @react-native-async-storage/async-storage

Output

› Installing 1 SDK 57.0.0 compatible native module and 2 other packages using npm
> npm install --save @tanstack/react-query zustand
added 6 packages, and audited 581 packages in 12s

AsyncStorage came in at 2.2.0 (npm 2,036 's latest is 3.1.1), and because it is native, the development build was rebuilt (2 minutes 33 seconds, with Gradle 19,597 's caches warm). BookNest's cart store maps book ids to quantities:

src/store/cart.ts: the cart store (excerpt)TypeScript

type CartState = {
  items: Record<number, number>;                   // book id -> quantity
  add: (id: number) => void;
  remove: (id: number) => void;
  clear: () => void;
};
export const useCart = create<CartState>()(
  persist(
    (set) => ({
      items: {},
      add: (id) => set((s) => ({ items: { ...s.items, [id]: (s.items[id] ?? 0) + 1 } })),
      // ...remove(id) and clear() the same way
    }),

create() receives a function that gets set and returns the initial state with the actions that change it. set shallow-merges what you return into the state and notifies subscribers. Update immutably: add builds a new items object, because Zustand compares values with Object.is to decide who re-renders. The extra () after create<CartState> lets middleware such as persist infer its types. The store is a module-level singleton, so any screen can import useCart.

MENU