13

With React Devtools installed, I can get store by:

$r.store.getState()

And how to do it without React Devtools?

ku8ar
  • 217
  • 1
  • 2
  • 9
  • Are you ok with checking it in the browser dev console? – Andrew Mar 28 '18 at 18:01
  • Yes. I want to get store in browser dev console, but without changing source code (without attaching store to window, etc.) – ku8ar Mar 28 '18 at 21:14
  • For those wanting attach ngrx store (which has no `getState()`) to window for console debugging without DevTools, try `store.pipe(take(1)).subscribe(_store => (window as any)._store = _store)`. For similar ideas, see https://stackoverflow.com/questions/35633684 – Marcus Dec 29 '20 at 18:00

4 Answers4

24

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)
Eamonn Gahan
  • 1,938
  • 1
  • 15
  • 12
6

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)

  1. After store creation console.log(store).
  2. In console, right click the store, and select Store as global variable.
  3. You'll get a new variable, by the name of temp1 (or tempX if you've created others).
  4. Now you can use temp1.getState().

Don't forget to clear the console statement (usually done as part of the build).

Ori Drori
  • 183,571
  • 29
  • 224
  • 209
3

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();
Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
1

The simplest way to access the store is probably using Provider from the react-redux. When we pass the store to this component, it makes it available to all children down the element tree. Store is made available via React's context API.

So in a child component of Provider, we can now do something like

render() {
  const { store } = this.context;
  console.log(store)
  return(
  ...
  )
}

This is the same way that react-redux's connect HOC is able to access the store.

Also did you know there is a great devtools chrome extension for Redux? This keeps a history of our state and actions so you can track the changes of your application lifecycle. This may be the best solution!!

Thomas
  • 131
  • 1
  • 5