Zustand integration

CodeBud.createZustandStoreChangeHandler

This method allows you to check Zustand state data on the Zustand tab in GUI.

CodeBud.createZustandStoreChangeHandler takes 1 (2) args:

selectFn - select function that takes store and returns some part of it
[optional] batchingTimeMs - batching time of sending new zustand state copy (in ms). Defaults to 500. Smaller value gives you smaller delay, but slower performance. It is not recommended to pass value smaller than 100

// Your zustand store
export const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}));

CodeBud.init("YOUR API KEY HERE", INSTRUCTIONS);

// Select function is used to determine part of the zustand state that will be visible for codebud.
// If you want to be able to see whole state, just return state from this function.
function select(state: BearState) {
  return state; // or state.bears; state.forests etc...
}

// Here we are subscribing for zustand state changes.
// Later you can call unsubscribeCodeBudFromZustandStoreChanges in order to unsubscribe (this is optional)
// batchingTimeMs is not passed so it will be 500ms by default
const unsubscribeCodeBudFromZustandStoreChanges = useBearStore.subscribe(
  CodeBud.createZustandStoreChangeHandler(select)
);

That's it. Now you should be able to check zustand state data on the Zustand tab in GUI.

It is not necessary to init CodeBud in the same file, where you are creating your zustand store. You can just import zustand store into the file containing codebud initiation, or you can create a function for codebud initiation and pass zustand store as one of its params (see Redux example), it's similar.