persist 和 immer 中间件介绍及解决痛点

persist 和 immer 中间件介绍及解决痛点

1. persist 中间件

persist 是 Zustand 提供的一个中间件，用于将状态持久化到存储中（如 localStorage、sessionStorage、AsyncStorage 或 IndexedDB 等）。这使得应用的状态可以在页面刷新或关闭后仍然保留。

解决的痛点：

• 数据丢失问题 ：在传统的前端应用中，页面刷新或关闭后，状态会丢失。persist 中间件通过将状态存储在本地存储中，解决了这一问题。
• 跨页面状态共享：持久化状态可以方便地在不同的页面或组件之间共享。

示例代码：

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

interface MyState {
  count: number;
  increment: () => void;
}

const useStore = create<MyState>()(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'myStore', // 存储中的唯一名称
      storage: createJSONStorage(() => localStorage), // 默认使用 localStorage
    }
  )
);

2. immer 中间件

immer 是一个用于处理不可变数据的库，它允许你以可变的方式编写代码，但背后会确保数据的不可变性。immer 中间件将 Immer 的功能集成到 Zustand 中，使得状态更新更加直观和方便。

解决的痛点：

• 不可变数据管理 ：在 React 等框架中，不可变数据是推荐的实践，但直接操作不可变数据可能会很复杂。immer 中间件简化了这一过程。
• 简化状态更新逻辑 ：使用 immer，你可以直接修改状态对象，而不需要手动创建新的状态对象。

示例代码：

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

const useStore = create(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => {
      state.count += 1; // 直接修改 state
    }),
  }))
);

结合使用 persist 和 immer

你可以同时使用 persist 和 immer 中间件，以实现持久化状态并简化状态更新逻辑。

示例代码：

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

const useStore = create(
  persist(
    immer((set) => ({
      count: 0,
      increment: () => set((state) => {
        state.count += 1; // 使用 immer 直接修改状态
      }),
    })),
    {
      name: 'myStore',
      storage: createJSONStorage(() => localStorage),
    }
  )
);

注意：

• 当结合使用 persist 和 immer 时，确保 immer 在 persist 之前被应用，以避免类型推断问题。
• 如果使用 TypeScript，可能需要显式定义类型，以确保类型提示正常工作。

通过使用 persist 和 immer 中间件，你可以更方便地管理状态的持久化和不可变性，从而提升开发效率和应用的用户体验。