The Complete Production SOP: How to Deploy and Run Zustand Modular Store Slices & LocalStorage Persistence in Autonomous AI Agents

---
description: Manage scalable global client state with modular slice patterns, selectors, and persistence.
globs: "src/store/**/*.ts, src/store/**/*.tsx"
alwaysApply: false
---

# Zustand Modular Store Slices & LocalStorage Persistence Rule

1. Slices must use StateCreator<RootState, [], [], SliceInterface>.
2. Combine slices using create<RootState>()((...a) => ({ ...createSliceA(...a), ...createSliceB(...a) })).
3. Persist middleware MUST configure partialize to restrict serialized keys.
4. Components MUST consume state via atomic selectors: useStore(state => state.field).

import { StateCreator } from 'zustand';

export interface AuthSlice {
  token: string | null;
  isAuthenticated: boolean;
  setAuth: (token: string) => void;
  logout: () => void;
}

export interface CartSlice {
  items: Array<{ id: string; quantity: number }>;
  addItem: (id: string) => void;
  clearCart: () => void;
}

export type RootStore = AuthSlice & CartSlice;
export type AppSlice<T> = StateCreator<RootStore, [['zustand/devtools', never], ['zustand/persist', unknown]], [], T>;

import { create } from 'zustand';
import { devtools, persist, createJSONStorage } from 'zustand/middleware';
import { RootStore } from './types';
import { createAuthSlice } from './slices/authSlice';
import { createCartSlice } from './slices/cartSlice';

export const useBoundStore = create<RootStore>()(
  devtools(
    persist(
      (...a) => ({
        ...createAuthSlice(...a),
        ...createCartSlice(...a),
      }),
      {
        name: 'app-storage',
        storage: createJSONStorage(() => localStorage),
        partialize: (state) => ({ token: state.token, items: state.items }),
      }
    ),
    { name: 'RootStore' }
  )
);

// Atomic render-optimized selectors
export const useAuthToken = () => useBoundStore((state) => state.token);
export const useIsAuthenticated = () => useBoundStore((state) => state.isAuthenticated);
export const useCartItems = () => useBoundStore((state) => state.items);