03-状态管理与路由——03-Zustand 中间件与最佳实践

Zustand 中间件与最佳实践

一、中间件介绍

Zustand 提供了多个中间件来扩展功能。

安装

npminstallzustand# 持久化中间件已内置

二、持久化中间件 (persist)

2.1 基础用法

import { create } from 'zustand'; import { persist } from 'zustand/middleware'; const useStore = create( persist( (set) => ({ count: 0, user: null, increment: () => set((state) => ({ count: state.count + 1 })), setUser: (user) => set({ user }) }), { name: 'app-storage', // localStorage key getStorage: () => localStorage, } ) );

2.2 部分持久化

const useStore = create( persist( (set) => ({ count: 0, temp: '不持久化', increment: () => set((state) => ({ count: state.count + 1 })) }), { name: 'app-storage', partialize: (state) => ({ count: state.count }) } ) );

2.3 使用 sessionStorage

const useStore = create( persist( (set) => ({ ... }), { name: 'session-storage', getStorage: () => sessionStorage, } ) );

2.4 自定义存储

const useStore = create( persist( (set) => ({ ... }), { name: 'custom-storage', getStorage: () => ({ getItem: (key) => { // 自定义获取逻辑 return localStorage.getItem(key); }, setItem: (key, value) => { // 自定义存储逻辑 localStorage.setItem(key, value); }, removeItem: (key) => { localStorage.removeItem(key); }, }), } ) );

三、DevTools 中间件

import { devtools } from 'zustand/middleware'; const useStore = create( devtools( (set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 }), false, 'increment'), decrement: () => set((state) => ({ count: state.count - 1 }), false, 'decrement') }), { name: 'AppStore' } ) );

四、组合多个中间件

import { create } from 'zustand'; import { persist, devtools } from 'zustand/middleware'; const useStore = create( devtools( persist( (set) => ({ user: null, token: null, setUser: (user) => set({ user }), logout: () => set({ user: null, token: null }) }), { name: 'auth-storage' } ), { name: 'AuthStore' } ) );

五、最佳实践

5.1 Store 拆分

// stores/userStore.js export const useUserStore = create((set) => ({ user: null, setUser: (user) => set({ user }) })); // stores/cartStore.js export const useCartStore = create((set) => ({ items: [], addItem: (item) => set((state) => ({ items: [...state.items, item] })), removeItem: (id) => set((state) => ({ items: state.items.filter(item => item.id !== id) })) }));

5.2 导出选择器 Hook

const useStore = create(...); export const useCount = () => useStore(state => state.count); export const useIncrement = () => useStore(state => state.increment); export const useDecrement = () => useStore(state => state.decrement);

5.3 重置 Store

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

5.4 带参数的 Action

const useStore = create((set) => ({ users: [], addUser: (user) => set((state) => ({ users: [...state.users, user] })), updateUser: (id, updates) => set((state) => ({ users: state.users.map(user => user.id === id ? { ...user, ...updates } : user ) })), deleteUser: (id) => set((state) => ({ users: state.users.filter(user => user.id !== id) })) }));

六、小结