Advanced Zustand: Middleware and Persisted State

Zustand has become a go-to state management solution for many React developers, thanks to its simplicity and powerful features. Today, we’ll dive deep into two advanced concepts that can take your Zustand implementation to the next level: middleware and persisted state.

Understanding Zustand Middleware

Think of middleware as your store’s personal bodyguard - it intercepts and processes actions before they reach your state. This opens up a world of possibilities for logging, debugging, and adding custom behaviors to your store.

Let’s start with a practical example:

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

const useStore = create(
  devtools(
    (set) => ({
      bears: 0,
      increaseBears: () => set((state) => ({ bears: state.bears + 1 })),
    })
  )
)

Creating Custom Middleware

Sometimes, you need middleware tailored to your specific needs. Here’s how you can create your own:

const logger = (config) => (set, get, api) =>
  config(
    (...args) => {
      console.log('  applying', args)
      set(...args)
      console.log('  new state', get())
    },
    get,
    api
  )

Persisted State: Making Your Store Immortal

One of the most powerful features of Zustand is its ability to persist state across page reloads. This is particularly useful for maintaining user preferences, shopping carts, or any data that should survive a browser refresh.

Here’s how to implement persisted state:

const useStore = create(
  persist(
    (set, get) => ({
      fishes: 0,
      addFish: () => set({ fishes: get().fishes + 1 }),
    }),
    {
      name: 'food-storage', // unique name
      getStorage: () => localStorage, // (optional) by default, 'localStorage' is used
    }
  )
)

Advanced Persistence Patterns

You can get even more granular with persistence by:

• Selecting specific parts of your state to persist
• Implementing custom storage solutions
• Handling version migrations
• Managing rehydration

Remember, while persistence is powerful, use it wisely. Not everything needs to be persisted, and over-persistence can lead to stale data issues.

When you combine middleware with persisted state, you create a robust state management system that can handle complex scenarios while maintaining excellent developer experience. The key is finding the right balance for your specific use case.