Блог

Я хотел поделиться действиями в разных местах дерева компонентов, например:

 // 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);
 

Я придумал такую реализацию :

 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;
};

 

Я хотел бы услышать, какие риски/недостатки может принести такая реализация. Я думаю, что я мог бы использовать промежуточное программное обеспечение useReducer для такого использования, но было бы излишним использовать весь код useReducer для такой реализации.

Кроме того, какие могут быть другие подходы к решению этой проблемы? С какой-либо дополнительной библиотекой или без нее…