Log action name + params

[HTMHell]

I'd like to console.log each time an action is being called, with the passed params.

For example:

increment, 1 decrement, 2 setName, foo

etc.

This is my middleware:

const logger: TLoggerImpl = (config, logger) => (set, get, api) => {
  const originalConfig = config(set, get, api);
  const newActions = Object.fromEntries(
    Object.entries(originalConfig).map(([actionName, actionFn]) => {
      let enhancedFn = actionFn;
      if (typeof actionFn === "function") {
        enhancedFn = (...args: unknown[]) => {
          const ret = actionFn(...args);
          logger(actionName, args);
          return ret;
        };
      }
      return [actionName, enhancedFn];
    }),
  );
  return { ...originalConfig, ...newActions };
};

It works when I wrap my store before zundo, but it's not ideal because I'm using debounce with handleSet.

I've seen a suggestion to use wrapTemporal here https://github.com/charkour/zundo/issues/184.

So I did:

        wrapTemporal: (storeInitializer) =>
          logger(storeInitializer, (fnName, fnArgs) => {
            console.log(`${fnName} called with ${JSON.stringify(fnArgs)}`);
          }),

But it only catches _handleSet with old state and new state.

Is there a way to do it?

[charkour]

Hi @HTMHell,

Thanks for the note. Right now, I don't have enough information to help solve your issue. I've created a Stackblitz. Could you fork the Stackblitz to provide a reproduction of the issue? Thank you

[HTMHell]

@charkour thanks for your reply!

https://stackblitz.com/edit/vitejs-vite-6cv3ufwy?file=src%2FApp.tsx

If you quickly click the button multiple times, you'll see it doesn't log it as much - which is exactly what I need, but when I try to do it like so, the log doesn't look like I need it to.