Zustand middleware là gì? Cho ví dụ về devtools middleware?

Zustand middleware wrap store creator với higher-order function — devtools, immer, persist là ba middleware phổ biến nhất; compose bằng cách nest lồng nhau, devtools ở ngoài cùng.

Zustand middleware dùng pattern higher-order function wrap store creator.

Import từ 'zustand/middleware'.

Compose nhiều middleware bằng cú pháp lồng nhau: create(devtools(immer(persist(storeCreator, persistOptions)), devtoolsOptions)) — thứ tự quan trọng: devtools nên ở ngoài cùng để capture đúng actions.

Middleware phổ biến:

1. devtools — kết nối Redux DevTools Extension, đặt tên action cho mỗi set call: set(updater, false, 'addItem') để log đẹp trong DevTools;
2. immer — cho phép mutate state trực tiếp trong set: set(s => { s.items.push(item) }) thay vì phải spread;
3. persist — lưu/khôi phục state vào storage;
4. subscribeWithSelector — cho phép subscribe vào một phần state với selector và equality function, hữu ích cho side effects

Custom middleware: function nhận (config) => (set, get, api) => config(set, get, api) với logic thêm vào trước/sau set.

Zustand middleware wraps the store creator with a higher-order function — devtools, immer, and persist are the most common; compose by nesting, with devtools outermost.

Zustand middleware uses a higher-order function pattern that wraps the store creator.

Import from 'zustand/middleware'.

Compose multiple middleware by nesting: create(devtools(immer(persist(storeCreator, persistOptions)), devtoolsOptions)) — order matters: devtools should be outermost to capture actions correctly.

Common middleware:

1. devtools — connects to Redux DevTools Extension; name each set call: set(updater, false, 'addItem') for clean DevTools logs;
2. immer — allows direct state mutation in set: set(s => { s.items.push(item) }) instead of spreading;
3. persist — saves/restores state to storage;
4. subscribeWithSelector — allows subscribing to a state slice with a selector and equality function, useful for side effects

Custom middleware: a function taking (config) => (set, get, api) => config(set, get, api) with additional logic before/after set.