How to get content of Redux store in console without devtools?
Option 1
You can attach the store to window
while you're in a dev mode, and then you can access if from the console.
if(env === 'dev') { // only an example - you'll need to tailor this to your build system
window.store = store;
}
Now you can access it directly from the console:
store.getState()
Option 2 (in chrome)
- After store creation
console.log(store)
. - In console, right click the store, and select
Store as global variable
. - You'll get a new variable, by the name of
temp1
(or tempX if you've created others). - Now you can use
temp1.getState()
.
Don't forget to clear the console statement (usually done as part of the build).
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)
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();