ayanami/esnext/redux-devtools-extension.js

A better way to react with state

import noop from 'lodash/noop';
const FakeReduxDevTools = {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    connect: (_config) => ({ send: noop, init: noop }),
};
const ReduxDevTools = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) ||
    FakeReduxDevTools;
const STATE = {};
const getDevTools = (() => {
    let devTools;
    return () => {
        if (!devTools) {
            devTools = ReduxDevTools.connect({ name: `Ayanami` });
            devTools.init({});
        }
        return devTools;
    };
})();
let isEnableLog = false;
export function enableReduxLog() {
    isEnableLog = true;
}
export function disableReduxLog() {
    isEnableLog = false;
}
export function logStateAction(namespace, infos) {
    if (isEnableLog) {
        const action = {
            type: `${namespace}/${infos.actionName}`,
            params: filterParams(infos.params),
        };
        if (infos.state) {
            STATE[namespace] = infos.state;
        }
        getDevTools().send(action, STATE);
    }
}
function filterParams(params) {
    if (params && typeof params === 'object') {
        if (params instanceof Event) {
            return `<<Event:${params.type}>>`;
        }
        else if (params.nativeEvent instanceof Event) {
            return `<<SyntheticEvent:${params.nativeEvent.type}>>`;
        }
    }
    return params;
}