Redux DevTools: Seeing Every State Change
Redux DevTools logs every action ever dispatched, shows state diffs, and lets you replay history. Here's how to set it up and what to do with it.
console.log(store.getState()) works. It is also the kind of debugging that gets old fast.
Redux DevTools is what you use instead. It logs every action dispatched in your app, shows the before and after of each state change, and lets you step backward through history to find exactly where a bug entered.
Once you use it, debugging without it feels like flying blind.
[!TIP] Run this yourself: The store setup used throughout this post is in the code-practice repo. Wire up DevTools on top of it and explore the action log live.
Setting It Up
Two pieces: a Chrome extension and a package.
Install the Redux DevTools extension from the Chrome Web Store. It is published by remotedevio.
Then install the npm bridge that connects your store to the extension:
npm install redux-devtools-extension --save-devOpen your store setup and add composeWithDevTools:
import { createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import { scoreReducer } from './reducers'
const store = createStore(scoreReducer, composeWithDevTools())That second argument to createStore gives the DevTools extension permission to read your store. Without it, the extension sees nothing.
Restart the dev server, open Chrome, navigate to your app, and press F12. You will see a Redux tab.
What You See
ExpandRedux DevTools schematic showing the action log and state diff
The panel has two sides.
Left side: the action log. Every action your app has dispatched, in order, starting with the @@redux/INIT that fires when the store is created. Click any action to inspect its payload and see what it did to the state.
Right side: state and diff. Four tabs:
- State: the full state snapshot at the selected point in time
- Diff: what changed between the previous action and this one (green = added/changed, red = removed)
- Action: the raw action object that was dispatched
- Test: write unit test assertions directly against your reducer. Supply an initial state and an action, get back the computed new state, and compare it to an expected value.
The diff view is where most of the value lives. It answers "what exactly changed and why" without reading through console.log chains.
Why This Changes Debugging
Without DevTools, tracking down a state bug means:
- Adding console.log before and after each dispatch
- Reproducing the sequence of user actions that triggers the bug
- Squinting at timestamps to reconstruct what happened
With DevTools, you reproduce the bug once and then click backward through the action log. The diff shows exactly which action produced the unexpected state. The payload shows what data came with it.
The question "why is the score 15 and not 20?" becomes: click the ANSWER_WRONG action, check the diff, see that -5 was applied when you expected +10, trace back to the component that dispatched the wrong action type.
This works in production too. You can point the DevTools at a remote Redux store and inspect live state changes on a user's machine, which is how teams catch bugs that only appear in specific usage patterns.
Next: subscribe, payload, action types, and action creators. These are the remaining pieces of pure Redux before connecting it to actual React components.
The Essentials
- Redux DevTools requires a Chrome extension plus the
redux-devtools-extensionpackage wired intocreateStoreviacomposeWithDevTools(). - The action log shows every dispatched action in order. The diff tab shows exactly what changed in state with each action.
- DevTools works in production, letting you inspect live state changes on real users' machines to catch bugs that only appear in specific usage sequences.
Further Reading and Watching
- Redux DevTools Extension on GitHub: official repo with setup options and remote debugging docs
- Redux Fundamentals, Part 4: Store: covers
store.subscribe,getState, and DevTools integration
Keep reading