Функция распечатки (отладка состояния Redux и действий без Redux Dev Tools) - PullRequest
Новая
       7

Функция распечатки (отладка состояния Redux и действий без Redux Dev Tools)

2 голосов
/ 26 февраля 2020

Я изучаю, как Slack использует Redux. Я запускаю пользовательский Javascript на странице с использованием Chrome расширения CJS.

Я регистрирую действие и изменения состояния. Когда действие является функцией, я не могу правильно зарегистрировать функцию.

Вот выдержка из журнала консоли: 

...
[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();

1 Ответ

0 голосов
/ 04 марта 2020

Я не уверен, как лучше вы могли бы записать эту функцию. Поскольку код, скорее всего, минимизирован, вы не сможете получить его оригинальное имя, кроме как с помощью исходных карт. Какую дополнительную информацию вы хотели получить?

Тем не менее, довольно странно отправлять функцию для начала. Мне было бы более любопытно, как редуктор для store обрабатывает функции, поскольку обычно действия должны быть объектами со свойством type.

...