What is Zustand's middleware system?
Answer
Zustand supports middleware for extending store behavior. The middleware pattern wraps the store creator. Key built-in middleware: devtools: connect to Redux DevTools: import { devtools } from "zustand/middleware"; const useStore = create(devtools((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 }), false, "increment") }))). The third argument to set is the action name for DevTools. persist: automatically save/restore state: create(persist((set) => ({ count: 0 }), { name: "counter-storage", storage: createJSONStorage(() => localStorage) })). immer: enable mutable syntax: create(immer((set) => ({ items: [], add: (item) => set((s) => { s.items.push(item); }) }))). subscribeWithSelector: fine-grained subscriptions: useStore.subscribe((state) => state.count, (count) => console.log(count)). Combine middleware: create(devtools(persist(immer((set) => (...))))) — compose right-to-left.
Previous
How do you handle async operations in Redux Toolkit with createAsyncThunk?
Next
What is Reselect and memoized selectors?
More Redux / State Management Questions
View all →- Intermediate How do you handle async operations in Redux Toolkit with createAsyncThunk?
- Intermediate What is Reselect and memoized selectors?
- Intermediate How does normalized state shape work in Redux?
- Intermediate What is the Flux architecture pattern?
- Intermediate How do you test Redux applications?