javascriptreactjsreduxreact-devtools

How to get content of Redux store in console without devtools?


With React Devtools installed, I can get store by:

$r.store.getState()

And how to do it without React Devtools?


Solution

  • I was in a situation where I could not assign anything to window and I also did not have the opportunity to use react or redux dev tools.

    This is obviously undocumented and brittle but it seemed to work for me on a few different sites that had redux. Outputs access to state (store with minor tweaks) within console.

    Assumes you are rendering react to a dom node with id react-root.

    const appStates = []
    const reactRoot = document.getElementById('react-root')
    let base
    
    try {
        base = reactRoot._reactRootContainer._internalRoot.current
    } catch (e) {
        console.log('Could not get internal root information from reactRoot element')   
    }
    
    while (base) {
        try {
            state = base.pendingProps.store.getState()
            // This also sometimes works...
            // state = base.stateNode.store.getState()
            appStates.push(state)
        } catch (e) {
            // no state
        }
        base = base.child
    }
    
    console.log('Application States', appStates)