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

persistimmer 中间件介绍及解决痛点

1. persist 中间件

persist 是 Zustand 提供的一个中间件,用于将状态持久化到存储中(如 localStoragesessionStorageAsyncStorageIndexedDB 等)。这使得应用的状态可以在页面刷新或关闭后仍然保留。

解决的痛点:

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

示例代码:

typescript 复制代码
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,你可以直接修改状态对象,而不需要手动创建新的状态对象。

示例代码:

typescript 复制代码
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';

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

结合使用 persistimmer

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

示例代码:

typescript 复制代码
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),
    }
  )
);

注意:

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

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

相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试