تتيح لك هذه الإضافة التقاط تغييرات (mutations) وحالة Zustand وفحصها لاحقًا أثناء إعادة تشغيل تسجيلات الجلسات. وهذا مفيد جدًا لفهم المشكلات وإصلاحها.

npm i @openreplay/tracker-zustand

قم بتهيئة حزمة @openreplay/tracker كالمعتاد وحمّل الإضافة فيها. استدعِ الإضافة لتحديد اسم المتجر (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";
import Tracker from '@openreplay/tracker';
import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand';


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

// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
// cast type to new one
// but this seems to not be required and everything is working as is
const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger


const useBearStore = create(
  zustandPlugin((set: any) => ({
    bears: 0,
    increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 }),
  }),
    // store name is optional
    // and is randomly generated if undefined
  'bear_store'
  )
)

يمكنك تخصيص سلوك الإضافة باستخدام خيارات لتنقية بياناتك. وهي مشابهة لتلك الموجودة في الإضافة القياسية createLogger.

trackerZustand({
  filter (mutation, state) {
    // returns `true` if a mutation should be logged
    // `mutation` is a `{ type, payload }`
    return mutation.type !== "aBlacklistedMutation";
  },
  transformer (state) {
    // transform 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 الخاص بنا أو زيارة المنتدى للحصول على المساعدة من مجتمعنا.