Print out Function (Debug Redux State and Actions without Redux Dev Tools)

Viewed 222

I am doing some research into how Slack uses Redux. I am running custom Javascript on the page using the Chrome extension CJS.

I log the action and state changes. When the action is a function I can't log the function correctly.

Here is an excerpt from the console log:

...
[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}
...

The code where I print the function is:

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

Here is full code code:

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();
1 Answers

I'm not sure how better you could log that function. Since the code is most likely minified, you won't be able to get its original name, except maybe through sourcemaps. What more information did you want?

That said, it's pretty strange to dispatch a function to begin with. I would be more curious how the reducer for store is handling functions since, normally, actions are supposed to be objects with a type property.

Related