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.