打印出 Function (Debug Redux State and Actions without Redux Dev Tools)答案

【问题标题】：Print out Function (Debug Redux State and Actions without Redux Dev Tools)打印出 Function (Debug Redux State and Actions without Redux Dev Tools)
【发布时间】：2020-06-09 23:07:51
【问题描述】：

我正在研究 Slack 如何使用 Redux。我正在使用 Chrome 扩展程序 CJS 在页面上运行自定义 Javascript。

我记录操作和状态更改。当操作是函数时，我无法正确记录函数。

这是控制台日志的摘录：

...
[AP] store dispatch called: function d(e,n){return t(e,n,r)}
[AP] teamStore dispatch called: {"type":"[21] Navigate to a route","payload":{"routeName":"ROUTE_ENTITY","params":{"teamId":"TS6QSK7PA","entityId":"DU52E70NB"}},"error":false}
...

我打印函数的代码是：

console.log("[AP] store dispatch called: " + (JSON.stringify(action) || action.toString()));

这里是完整的代码代码：

const teamStates = [];
const states = [];
let base;
let teamStore;
let store;

function subscribeToStores() {
    const reactRoot = document.getElementsByClassName('p-client_container')[0];
    try {
        base = reactRoot._reactRootContainer._internalRoot.current
    } catch (e) {
        console.log('[AP] Could not find React Root');   
    }

    if (!base) {
        setTimeout(() => {
            subscribeToStores();
        }, 1);
    } else {
        console.log('[AP] Found React Root');
        while (!store) {
            try {
                store = base.pendingProps.store;
            } catch (e) {}
            base = base.child
        }
        console.log('[AP] Found store');
        console.log(JSON.stringify(store.getState()));
        states.push(store.getState());


        while (!teamStore) {
            try {
                teamStore = base.pendingProps.teamStore;
            } catch (e) {}
            base = base.child
        }
        console.log('[AP] Found teamStore');
        console.log(JSON.stringify(teamStore.getState()));
        teamStates.push(teamStore.getState());

        var unsubscribe1 = teamStore.subscribe(() => {
            teamStates.push(teamStore.getState());
            console.log("[AP] teamStates length:" + teamStates.length);
            console.log(JSON.stringify(teamStore.getState()));
        })

        var rawDispatchTeamStore = teamStore.dispatch;
        teamStore.dispatch = (action) => {
            console.log("[AP] teamStore dispatch called: " + (JSON.stringify(action) || action.toString()));
            rawDispatchTeamStore(action);
        }

        var unsubscribe2 = store.subscribe(() => {
            states.push(store.getState());
            console.log("[AP] states length:" + states.length);
            console.log(JSON.stringify(store.getState()));
        })

        var rawDispatchStore = store.dispatch;
        store.dispatch = (action) => {
            console.log("[AP] store dispatch called: " + (JSON.stringify(action) || action.toString()));
            rawDispatchStore(action);
        }

    }
}

subscribeToStores();

【问题讨论】：

标签： javascript reactjs redux redux-thunk

【解决方案1】：

我不确定你能把那个函数记录到什么程度。由于代码很可能已被缩小，您将无法获得其原始名称，除非可能通过源映射。您还想要什么信息？

也就是说，一开始就调度一个函数是很奇怪的。我会更好奇 store 的减速器是如何处理函数的，因为通常情况下，动作应该是具有 type 属性的对象。

【讨论】：