A small, fast, and scalable bearbones state management solution. Zustand has a comfy API based on hooks. It isn’t boilerplatey or opinionated, but has enough convention to be explicit and flux-like.
Installation
Install Zustand Library in your ReactJS Project.
Zustand is available as a package on NPM for use:
1. Create a File store.js in src and paste below code
import create from ‘zustand’;
import { devtools, persist } from ‘zustand/middleware’;
const useApp = ((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count – 1 })),
}));
const useAppStore = create(
devtools(
persist(useApp, {
name: ‘test’
})
)
)
export default useAppStore;
2. Import the useAppStore in App.js File
3. Create a two button for testing your increment and decrement
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
Done.
Plese Vote and React on our posts.
