此插件允许你捕获 Zustand 的变更/状态，并在回放会话录制时进行检查。这对于理解和修复问题非常有用。

npm i @openreplay/tracker-zustand

像往常一样初始化 @openreplay/tracker 包，并将插件加载到其中。调用该插件以设置 store 名称，这将返回一个具名的 store tracker 实例，你可以将你的 store 实例作为参数来调用它，从而启用对该 store 的追踪。

import Tracker from '@openreplay/tracker';
import trackerZustand from '@openreplay/tracker-zustand';

import Tracker from '@openreplay/tracker/cjs';
import trackerZustand from '@openreplay/tracker-zustand/cjs';

import create from "zustand";

const tracker = new Tracker({
  projectKey: YOUR_PROJECT_KEY,
});

const zustandPlugin = tracker.use(trackerZustand())
// name is optional, randomly generated 
// string if its undefined
const bearStoreLogger = zustandPlugin('bear_store')


const useBearStore = create(
  bearStoreLogger((set: any) => ({
    bears: 0,
    increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 }),
  }))
)

你可以通过选项来自定义插件的行为以净化你的数据。它们与标准 createLogger 插件中的选项类似。

trackerZustand({
  filter (mutation, state) {
    // returns `true` if a mutation should be logged
    // `mutation` is a `{ type, payload }`
    return mutation.type !== "aBlacklistedMutation";
  },
  transformer (state) {
    // transforms the state before logging it.
    // for example return only a specific sub-tree
    return state.subTree;
  },
  mutationTransformer (mutation) {
    // mutations are logged in the format of `{ type, payload }`
    // we can format it any way we want.
    return mutation.type;
  },
})

设置此插件时遇到了困难？请加入我们的 Slack，或访问我们的论坛，从我们的社区获取帮助。