Fe 03 Zustand Store

Preconditions

• zustand installed in apps/frontend
• Slice directory exists (FE-01 or FE-02)

Workflow

1. Create store.ts — with persist middleware if persist input provided:

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

type State = {
  // TODO: add fields from stateFields input
  // action signatures
};

// With persist:
export const <storeName> = create<State>()(
  persist(
    (set) => ({
      // TODO: default values from stateFields[*].defaultValue
      // TODO: action implementations
    }),
    {
      name: '<persist.key>',
      // Use persist.storage to select the storage engine:
      storage: createJSONStorage(() => localStorage), // replace with sessionStorage if persist.storage === 'sessionStorage'
    }
  )
);

// Without persist (use when persist input is omitted):
// export const <storeName> = create<State>()((set) => ({
//   // TODO: default values and action implementations
// }));

2. If persist is omitted, use the bare create<State>()((set) => ({ ... })) pattern (no middleware wrapper)

3. Create selectors.ts with pure functions operating on the store state. Type the state parameter using the State type exported from store.ts:

// Import the State type from the store file
import type { State } from './store';
// Or re-export State from store.ts: export type { State };

// Example selector — replace with fields from stateFields input
export const selectIsAuthenticated = (state: State): boolean =>
  state.token !== null;

4. Export the store hook from the slice's index.ts:

export { <storeName> } from './model/store';
export { selectIsAuthenticated } from './model/selectors';

5. Run pnpm -C apps/frontend typecheck

Error conditions

• E_PERSIST_KEY_REQUIRED: persist.key missing → Zustand requires a unique storage key; pass { name: 'unique-key' } to the persist options
• E_TYPECHECK_UNAVAILABLE: typecheck script missing → run pnpm -C apps/frontend tsc --noEmit directly

Reference

See docs/project-overview.md → "FE-03 — Zustand store slice" and the usePayInvoiceStore template.