andrerpena andrerpena - 5 months ago 88
Javascript Question

While debugging, can I have access to the Redux store from the browser console?

I have unit tests for my

reducers
, as I'm supposed so have. 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?

Answer

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.

Comments