Ce plugin vous permet de capturer les mutations et l’état de Zustand afin de les inspecter ultérieurement lors de la relecture des enregistrements de sessions. C’est très utile pour comprendre et corriger les problèmes.

npm i @openreplay/tracker-zustand

Initialisez le paquet @openreplay/tracker comme d’habitude et chargez-y le plugin. Appelez le plugin pour définir le nom du store ; cela renverra une instance de traceur de store nommée que vous pouvez appeler avec votre exemplaire de store en argument afin d’activer le suivi de ce 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'
  )
)

Vous pouvez personnaliser le comportement du plugin à l’aide d’options afin d’assainir vos données. Elles sont similaires à celles du plugin standard 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;
  },
})

Vous rencontrez des difficultés pour configurer ce plugin ? Rejoignez notre Slack ou consultez notre Forum et obtenez de l’aide auprès de notre communauté.