What are Zustand's middlewares and how to use them?

Common Zustand middlewares:

1. persist middleware

   • Functionality: Persists state to localStorage, sessionStorage, or custom storage
   • Use cases: Maintaining user login state, user preferences, etc.
   • Example:

     javascript
     import { create } from 'zustand';
     import { persist } from 'zustand/middleware';
     
     const useStore = create(
       persist(
         (set) => ({
           user: null,
           setUser: (user) => set({ user }),
         }),
         {
           name: 'user-storage', // storage name
         }
       )
     );

2. devtools middleware

   • Functionality: Integrates with Redux DevTools for debugging state changes
   • Use cases: Debugging state management in development environment
   • Example:

     javascript
     import { create } from 'zustand';
     import { devtools } from 'zustand/middleware';
     
     const useStore = create(
       devtools(
         (set) => ({
           count: 0,
           increment: () => set((state) => ({ count: state.count + 1 })),
         })
       )
     );

3. immer middleware

   • Functionality: Uses Immer library to simplify immutable state updates
   • Use cases: Handling complex nested state updates
   • Example:

     javascript
     import { create } from 'zustand';
     import { immer } from 'zustand/middleware/immer';
     
     const useStore = create(
       immer((set) => ({
         user: { name: 'John', age: 30 },
         updateName: (name) =>
           set((state) => {
             state.user.name = name;
           }),
       }))
     );

4. combine middleware

   • Functionality: Combines multiple state slices
   • Use cases: Modular management of complex state

Combining middlewares:

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

const useStore = create(
  devtools(
    persist(
      (set) => ({
        // state and actions
      }),
      { name: 'app-storage' }
    )
  )
);

Custom middleware:

You can create custom middleware for specific needs, such as logging, performance monitoring, etc.