implement listener React hook (useActionListener) for actions

[kerematam]

I am trying to have useActionListener hook implementation. I wonder if there is existing approach for such use case. My motivation behind this approach is to not rise some complex component state to global, and have more imperative approach to simplify code.

Usage will be maybe something like:

  const addPerson = usePeopleStore((state) => state.addPerson);
  useActionListener(addPerson, (action, args) => {
    console.log('action', action, args);
    // allow things like: action.abort();
  });

create the action like:

let peopleStore = (set) => ({
  people: ['John', 'Jane'],
  addPerson: createAction((person) =>
    set((state) => ({ people: [...state.people, person] }))
  ),
});

And here is my shot for createAction:

export function createAction(fn) {
  // Store the original function in a variable
  const originalFn = fn;

  // Create a Set to hold the listeners
  const listeners = new Set();

  // Create a new function that wraps the original function
  function enhancedFn(...args) {
    let isAborted = false;
    const abort = () => {
      isAborted = true;
    };

    // Call all listeners before the original function
    listeners.forEach((listener) => listener({ abort }, args));

    if (isAborted) {
      return () => {};
    } else {
      // Call the original function with the provided arguments
      return originalFn(...args);
    }
  }

  // Add methods to manage listeners
  enhancedFn.addListener = function (listener) {
    if (typeof listener === 'function') {
      listeners.add(listener);
    } else {
      throw new Error('Listener must be a function');
    }
  };

  enhancedFn.removeListener = function (listener) {
    listeners.delete(listener);
  };

  enhancedFn.getListeners = function () {
    return Array.from(listeners); // Return an array of the listeners
  };

  return enhancedFn;
}

export const useActionListener = (action, listenerFn, deps = []) => {
  React.useEffect(() => {
    action.addListener(listenerFn);
    return () => action.removeListener(listenerFn);
  }, deps);
};

Here is Stackblitz sandbox: https://stackblitz.com/edit/zustand-yx62ki?file=src%2FApp.js,src%2Fstore.js,src%2Fcomponents%2FPeople.js,src%2FstoreAction.js

[dai-shi]

Probably, I haven't seen something similar. I wonder if anyone has. Feel free to comment.

(If there's a demand, it might be good for a third-party library.)

[kerematam]

Do you see any problem with the implementation? Is it OK to hold the listeners and function state (like isAborted ) in closure?

[dai-shi]

It's a bit tricky but it's probably fine. Not 100% sure though.