admin管理员组

文章数量:1134601

I have unit tests for my reducers. However, when I'm debugging in the browser, I want to check if my actions have been called correctly and whether the state has been modified accordingly.

I'm looking for something like:

window._redux.store

... in the browser so I can type that on the console and check how things are going.

How can I achieve that?

I have unit tests for my reducers. However, when I'm debugging in the browser, I want to check if my actions have been called correctly and whether the state has been modified accordingly.

I'm looking for something like:

window._redux.store

... in the browser so I can type that on the console and check how things are going.

How can I achieve that?

• javascript
• reactjs
• redux

Share Improve this question Follow edited Nov 27, 2019 at 2:49 Andre Pena asked Dec 19, 2015 at 17:27 Andre PenaAndre Pena 59.3k5353 gold badges208208 silver badges257257 bronze badges 3

• 1 As a side note, you might consider using the Redux Devtools along with the LogMonitor to visualize your actions and resulting states. – Michelle Tilley Commented Dec 19, 2015 at 18:07
• 1 Talking about security, in production build mode, is it possible read store from browser console? – JRichardsz Commented Feb 8, 2018 at 20:51
• @JRichardsz stackoverflow.com/questions/43507052/… – Daniel Commented Oct 29, 2018 at 19:22

Add a comment  | 

11 Answers 11

Sorted by: Reset to default 201

How to view redux store on any website, with no code changes

Update Nov 2019

The react devtools have changed since my original answer. The new components tab in chrome's devtools still has the data, but you may have to search a little bit more.

1. open chrome devTools
2. select react devtool's Components tab
3. click on the top-most node and look in right-hand column for store to be shown
4. repeat step 3 down the tree until you find the store (for me it was the 4th level)
5. Now you can follow the steps below with $r.props.store.getState()

Original Answer

If you have react developer tools running you can use $r.store.getState(); with no changes to your codebase.

Note: You have to open the react devtool in your developer tools window first to make this work, otherwise you will get a $r is not defined error

1. open developer tools
2. click the React tab
3. ensure the provider node (or topmost node) is selected
4. then type $r.store.getState(); or $r.store.dispatch({type:"MY_ACTION"}) into your console

let store = createStore(yourApp)
window.store = store

Now you can access the store from window.store in the console like this:

window.store.dispatch({type:"MY_ACTION"})
window.store.getState()

The recommended solution doesn't work for me.

The correct command is:

$r.props.store.getState()

You can use a logging middleware as described in the Redux Book:

/**
 * Logs all actions and states after they are dispatched.
 */
const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd(action.type)
  return result
}

let createStoreWithMiddleware = applyMiddleware(logger)(createStore)

let yourApp = combineReducers(reducers)
let store = createStoreWithMiddleware(yourApp)

Alternatively, you could change the logging to just append to a global array (your window._redux) and you could look in the array when you needed information on a particular state.

If you're using Next JS, you can access the store by: window.__NEXT_REDUX_STORE__.getState()

You can also dispatch actions, just look at the options you have in window.__NEXT_REDUX_STORE__

Another answer suggests adding the store to the window, but if you just want access to the store as an object, you can define a getter on the window.

This code needs to be added where you've configured your store - in my app, this is the same file as where <Provider store={store} /> is called.

Now you can type reduxStore in the console to get an object - and copy(reduxStore) to copy it to the clipboard.

  Object.defineProperty(window, 'reduxStore', {
    get() {
      return store.getState();
    },
  });

You can wrap this in an if (process.env.NODE_ENV === 'development') to disable it in production.

In case you would like to see store state for debugging you could do this:

#import global from 'window-or-global'
const store = createStore(reducer)
const onStateChange = (function (global) {
  global._state = this.getState()
}.bind(store, global))
store.subscribe(onStateChange)
onStateChange()
console.info('Application state is available via global _state object.', '_state=', global._state)

Another way I was able to access the redux store in my reducers when simply console.log()s were not working was as follows:

First import current like:

import { current } from '@reduxjs/toolkit'

then you can print the values like:

reducers: {
    addItem: (state, action) => {
      // some stuff
      console.log('==>state:');
      console.log(current(state));
    },

! WARNING! : Since the redux store is in a wrapper, simply console logging it would print: Proxy(Object)...

With react developer tools:

const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store

If you want to use the various methods of the redux state and view it as well, you can store it as a temp global variable and access it via the console. In my solution I used Firefox with React Dev Tools installed.

1. Open React dev tools, find the topmost component where the store is visible.
2. Right click the store variable in the inspector window and click on Store as global variable. As soon as you do this, you should see some variable name output to the browser's console. Something like $reactTemp0.
3. You can now use this variable to access the store and its methods. So if I wanted to execute a get method, I could say $reactTemp0.getState() and view the entire state. You can also use other methods, like dispatch, but there might be better ways of testing those behaviors.

First of all, you need to define the store in the window object (You can place it in you configureStore file):

window.store = store;

Then you only need to write in the console the following:

window.store.getState();

Hop this helps.

本文标签：