Zustand Stores
Designs Zustand store state, selectors, optimistic writes and action composition.
Install
npx skills add lobehub/lobehub --skill zustand -g -a claude-code -y- Repository
- lobehub/lobehub83.7k
- Category
- Engineering
- Updated
- 3d ago
- License
- See repository
- Context cost
- Lightabout 1,366 tokens
- Runs scripts
- No, instructions only
What it does
Use for Zustand stores: state shapes and type sources, state-only stores with xActions classes, replica-backed list/detail data (local-replica), selectors, optimistic writes, and legacy slice/internal_* action composition.
LobeHub Zustand State Management
State Shapes and Types
- Import shared store types from
@lobechat/types, not@lobechat/database. - Keep lightweight list-item types separate from full detail types; list types must not extend heavy detail types.
- Key cached details by id (
xxxDetailMap: Record<string, Detail>); never hold a singlecurrentDetailobject. - Read through
xxxSelectorsaggregates (selectors.ts), not ad-hoc lambdas repeated across components. - Before choosing list/detail shapes or type sources, read Data structures.
State-Only Stores (default for new and migrated stores)
Actions stay out of the Zustand state. Reference: src/store/page.
| File | Owns |
|---|---|
store.ts | useXStore = createWithEqualityFn<XState>()(devtools(() => initialState), shallow): state only, no methods |
privateAction.ts | XPrivateAction: replica slices, entity links, and write helpers shared by public actions. Not exported from index.ts |
action.ts | XActionImpl (the public API) and the singleton xActions = new XActionImpl(setState, getState, new XPrivateAction(…)) |
