How to use middleware in Zustand?

1. Install necessary dependencies (if using persist middleware):

bash
npm install zustand persist
# or
yarn add zustand persist

1. Use middleware in store:

javascript
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set, get) => ({
      // 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 }),
      
      // Use get to access current state
      incrementBy: (value) => set((state) => ({ 
        count: state.count + value 
      }))
    }),
    {
      // persist configuration
      name: 'my-storage', // Storage name
      storage: localStorage, // Storage method (default localStorage)
      // Optional: partial persistence
      partialize: (state) => ({ user: state.user }),
      // Optional: transform functions
      serialize: (state) => JSON.stringify(state),
      deserialize: (str) => JSON.parse(str)
    }
  )
);

export default useStore;

1. Use devtools middleware:

javascript
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }))
    }),
    {
      name: 'my-store', // Name in Redux DevTools
      enabled: true // Whether to enable
    }
  )
);

1. Combine multiple middleware:

javascript
import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    persist(
      (set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 }))
      }),
      { name: 'my-storage' }
    ),
    { name: 'my-store' }
  )
);

Key points:

• Zustand middleware is used through function composition
• persist middleware can persist state to localStorage, sessionStorage, etc.
• devtools middleware allows viewing state changes in Redux DevTools
• Middleware order is important, typically devtools on the outer layer, persist on the inner layer
• Custom middleware can be created to implement specific functionality