Zustand：状态持久化在项目中的应用-编程知识

Zustand：状态持久化在项目中的应用

news/2024/9/22 9:40:15/文章来源:https://www.cnblogs.com/miniwa/p/18378609

Zustand的持久化中间件允许你将状态存储在各种存储中，例如localStorage、AsyncStorage或IndexedDB等。这使得应用的状态可以跨页面持久化。也就是说用户刷新页面或者关闭浏览器后重新打开，应用的状态依然可以被保留。

使用方法

首先，你需要从zustand库中导入create和persist函数，以及createJSONStorage辅助函数。

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

然后，使用persist函数包装你的Zustand store，并提供必要的配置。

下面是一个简单的示例，演示了如何创建一个持久化的Zustand store：

export const useBearStore = create(persist((set, get) => ({bears: 0,addABear: () => set({ bears: get().bears + 1 }),}),{name: 'bear-storage', // 存储中的项目名称，必须是唯一的storage: createJSONStorage(() => sessionStorage), // 使用sessionStorage作为存储},),
);

持久化选项

以下是一些常用的持久化选项：

name：存储中使用的唯一键名。
storage：自定义存储引擎。
partialize：选择存储部分状态字段。
onRehydrateStorage：存储恢复时调用的监听函数。
version：版本控制，用于处理存储的兼容性。
migrate：处理版本迁移的函数。
merge：自定义持久化值与当前状态的合并方式。
skipHydration：跳过初始化时的自动恢复。

版本控制与迁移

如果你的状态结构发生变化，比如字段重命名或新增字段，你可以使用version和migrate选项来处理：

export const useVersionedStore = create(persist((set, get) => ({newField: 0,}),{name: 'versioned-storage',version: 1,migrate: (persistedState, version) => {if (version === 0) {persistedState.newField = persistedState.oldField;delete persistedState.oldField;}return persistedState;},},),
);

手动触发恢复

在某些情况下，你可能需要手动触发状态的恢复，可以使用rehydrate方法：

await useBoundStore.persist.rehydrate();

检查是否已恢复

使用hasHydrated方法可以检查状态是否已经恢复：

const hasHydrated = useBoundStore.persist.hasHydrated();

案例实践

这里分享一个开源项目ChatGPT-Next-Web中的使用（https://github.com/Yidadaa/ChatGPT-Next-Web），这也是一个宝藏项目，可以快速搭建一个自己的GPT。项目中zustand用于全局的状态管理，主要用于存储GPT对话聊天信息。

工具方法，createPersistStore

里面所有的状态store都是通过该Util方法创建的。

export function createPersistStore<T extends object, M>(state: T,methods: (set: SetStoreState<T & MakeUpdater<T>>,get: () => T & MakeUpdater<T>,) => M,persistOptions: SecondParam<typeof persist<T & M & MakeUpdater<T>>>,
) {return create(persist(combine({...state,lastUpdateTime: 0,},(set, get) => {return {...methods(set, get as any),markUpdate() {set({ lastUpdateTime: Date.now() } as Partial<T & M & MakeUpdater<T>>);},update(updater) {const state = deepClone(get());updater(state);set({...state,lastUpdateTime: Date.now(),});},} as M & MakeUpdater<T>;},),persistOptions as any,),);
}

这个函数，在创建store的时候，添加了一个记录更新时间的字段，并在数据更新的时候自动更新时间。同时也支持手动触发标记更新。

参数：

state: 初始状态对象。
methods: 一个函数，接收set和get方法，返回一些自定义的方法。这些方法会被合并到最终的store中。
persistOptions: 持久化的选项，这些选项将被传递给persist中间件。

函数体：

使用zustand的create函数创建一个store。
在create函数内部，首先使用persist和combine中间件。
combine中间件用于合并多个store或提供额外的方法。在这里，它合并了初始状态和由methods函数提供的方法。
在combine的回调函数内部，除了通过methods函数提供的方法外，还额外添加了两个方法：markUpdate和update。
- markUpdate方法：更新lastUpdateTime字段为当前时间。
- update方法：深拷贝当前状态，对拷贝后的状态应用更新函数，然后设置新的状态和lastUpdateTime。
最后，将持久化选项persistOptions传递给persist中间件。

combine 是 zustand 提供的一个工具函数，用于组合状态和行为方法。它将状态和行为方法组合成一个新的对象，这样你就可以使用 set 和 get 方法来更新和访问状态。

具体来说，combine 接受两个参数：

1.初始状态（上面的代码中的 state 和 lastUpdateTime）
2.行为方法（一个函数，接收 set 和 get 参数，并返回一些方法，比如 markUpdate 和 update）

这个组合让你可以把状态和方法结合在一起，然后传递给 persist，最终创建出一个带有持久化功能的 store。

使用方式

有了工具函数，就可以用来创建具体的store了。以下是其中用户配置数据的store，其他的也差不多，主要是store业务方法的完善。

export const useAppConfig = createPersistStore({ ...DEFAULT_CONFIG },(set, get) => ({reset() {set(() => ({ ...DEFAULT_CONFIG }));},mergeModels(newModels: LLMModel[]) {if (!newModels || newModels.length === 0) {return;}const oldModels = get().models;const modelMap: Record<string, LLMModel> = {};for (const model of oldModels) {// model.available = false;modelMap[`${model.name}@${model?.provider?.id}`] = model;}for (const model of newModels) {// model.available = Boolean(newModels.available);modelMap[`${model.name}@${model?.provider?.id}`] = model;}set(() => ({models: Object.values(modelMap),}));},allModels() {},}),{name: StoreKey.Config,version: 3.9,migrate(persistedState, version) {const state = persistedState as ChatConfig;if (version < 3.4) {state.modelConfig.sendMemory = true;state.modelConfig.historyMessageCount = 4;state.modelConfig.compressMessageLengthThreshold = 1000;state.modelConfig.frequency_penalty = 0;state.modelConfig.top_p = 1;state.modelConfig.template = DEFAULT_INPUT_TEMPLATE;state.dontShowMaskSplashScreen = false;state.hideBuiltinMasks = false;}if (version < 3.5) {state.customModels = "claude,claude-100k";}return state as any;},},
);

可以看到，这里主要是这几件事