How to create and use a Zustand store?

Steps to create a Zustand store:

1. Install Zustand:

bash
npm install zustand
# or
yarn add zustand

1. Create store file (e.g., store.js):

javascript
import { create } from 'zustand';

const useStore = create((set) => ({
  // State
  count: 0,
  user: null,
  
  // Methods to manipulate state
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  setUser: (user) => set({ user }),
  reset: () => set({ count: 0, user: null })
}));

export default useStore;

1. Use store in components:

javascript
import React from 'react';
import useStore from './store';

function Counter() {
  // Method 1: Get entire store
  const { count, increment, decrement } = useStore();
  
  // Method 2: Selective subscription (recommended for better performance)
  const countValue = useStore((state) => state.count);
  const incrementCount = useStore((state) => state.increment);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

Key points:

• Use create function to create a store
• Store is a function that receives set and get parameters
• set is used to update state, supporting functional updates
• Use useStore hook to access state in components
• Recommended to use selective subscription for better performance