Member-only story

ADVANCED ZUSTAND “3”. Middleware Internals & Writing Custom Middleware

--

Press enter or click to view image in full size

Zustand middlewares are used to extend, intercept, or manipulate store behaviour. Let’s think with a small example:

• Logging
• Persisting (localStorage or SessionStorage)
• Redux Devtools integration
• Immer: Immutable state management

Middleware in Zustand generally wraps store creators as Higher Order Functions (HOC).

In easy way we can think like: If we don’t have middleware:

Component  →  Store → State

If we have middleware:

Component → Store → Middleware → State

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

const useStore = create(
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

In here, devtools is middleware, and it intercept set/get process of the store and sends it to Devtools (Redux devtools).

Middleware Internals

The basic working principle of Zustand middleware is as follows:

1. The store is wrapped during creation.
2. The set and get Functions can be…