Implement Zustand stores with persistence, selectors, async actions, and middleware.
npx skills add https://github.com/Strocs/.dotfiles --skill zustand-5-strocs
Please help me install this Agent Skill. Skill: zustand-5 Source: https://github.com/Strocs/.dotfiles/tree/main/.config/opencode/skills/zustand-5 Command: npx skills add https://github.com/Strocs/.dotfiles --skill zustand-5-strocs
Zustand patterns help manage React state more predictably by organizing stores, persistence, and actions in a scalable way.
Use zustand-5 to implement a basic store, then progressively add persistence, selectors, async actions, slices, and middleware in your React project.
High-intent search queries and answers about installing and using this skill.
Persist Zustand state across page reloads by applying the persist middleware to your store, which automatically saves and rehydrates state data. This middleware ensures your React state remains intact during browser refreshes.
The slices pattern composes multiple independent state slices into a single Zustand store for modular React state management. Each slice defines its own state and actions, which are then combined to create a unified store.
Use selectors in Zustand to efficiently read specific state fields and prevent unnecessary React re-renders. By selecting only the required data fields, components skip re-rendering when unrelated state properties change.
You can integrate Immer middleware with Zustand to mutate state immutably using standard JavaScript syntax. The middleware translates your direct mutations into immutable updates behind the scenes for your React store.
Handle async actions and data fetching in a Zustand store by defining asynchronous functions within your store configuration. These actions manage side effects and update the React state once the asynchronous data retrieval resolves.
Zustand 5 supports devtools integration to inspect and debug your React state management logic. Connecting the devtools middleware allows you to track state changes and action history during application development.
KilloconQImplement Zustand 5 store patterns for React state management.
inpinitiConnects a Zustand vanilla store to the json-render StateStore interface.
crozzbiteCreate Zustand 5 stores with persistence, selectors, and middleware.
m-salauddinConfigure Redux stores, slices, and async operations with Redux Toolkit.
