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

Question

With React Devtools installed, I can get store by:

$r.store.getState()

And how to do it without React Devtools?

Answer 1

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)

Answer 2

I guess the simplest way is to assign it to the global window just right after you created your store:

const myStore = createStore();

if(process.env.NODE_ENV !== 'production') {
  window.store = myStore;
}

and later you can access it in browser console like:

store.getState();