While debugging, can I have access to the Redux store from the browser console?
The recommended solution doesn't work for me.
The correct command is:
$r.props.store.getState()
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"})
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.
- open chrome devTools
- select react devtool's
Components
tab - click on the top-most node and look in right-hand column for
store
to be shown - repeat step 3 down the tree until you find the
store
(for me it was the 4th level) - Now you can follow the steps below with
$r.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
- open developer tools
- click the React tab
- ensure the provider node (or topmost node) is selected
- then type
$r.store.getState();
or$r.store.dispatch({type:"MY_ACTION"})
into your console
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.