How to use the Zustand in ReactJS for State Management?

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:

npm install zustand

• 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

 const { count, increment, decrement } = useAppStore();

• 3. Create a two button for testing your increment and decrement

<h1>Count: {count}</h1>
                <button onClick={increment}>Increment</button>
                <button onClick={decrement}>Decrement</button>

Done.

Plese Vote and React on our posts.