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

最新推荐文章于 2024-09-08 14:04:39 发布

浮华似水

最新推荐文章于 2024-09-08 14:04:39 发布

阅读量1k

点赞数 18

文章标签：后端

本文链接：https://blog.csdn.net/zmh_fuhuasishui/article/details/141509534

版权

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;
    },
  },
);