Quería compartir acciones a través de diferentes lugares en el árbol de componentes como:

 // in one component, listen an action useListener("DELETE", (payload) => { console.log("DELETE EVENT 1", payload); }); // in another component, dispatch action const dispatch = useDispatch(); dispatch("DELETE", payload);

Se me ocurre tal implementación:

 const globalListener = {}; export const useListener = (actionName = "default", fn, dependencies = []) => { const listenerRef = useRef(Symbol("listener")); useEffect(() => { const listener = listenerRef.current; return () => { delete globalListener[actionName][listener]; }; }, []); useEffect(() => { const listener = listenerRef.current; if (!globalListener?.[actionName]) { globalListener[actionName] = {}; } globalListener[actionName][listener] = fn; }, dependencies); }; export const useAction = () => { const dispatch = (actionName, payload) => { const actionListener = globalListener?.[actionName]; if (!actionListener) { return; } const keys = Reflect.ownKeys(actionListener); keys.forEach((key) => { actionListener[key]?.(payload); }); }; return dispatch; };

Me gustaría saber qué tipo de riesgos/fallas puede traer dicha implementación. Creo que podría usar el middleware de useReducer para tal uso, pero sería excesivo usar todo el código de useReducer para hacer tal implementación.

También; ¿Cuáles podrían ser otros enfoques para resolver esto? Con o sin biblioteca extra...