A live-editing time travel environment for Redux.
See Dan's React Europe talk demoing it!
- Lets you inspect every state and action payload
- Lets you go back in time by “cancelling” actions
- If you change the reducer code, each “staged” action will be re-evaluted
- If the reducers throw, you will see during which action this happened, and what the error was
- With
persistState()store enhancer, you can persist debug sessions across page reloads - To monitor a part of the state, you can set a
selectprop on the DevTools component:<DevTools select={state => state.todos} store={store} monitor={LogMonitor} />
npm install --save-dev redux-devtools
DevTools is a store enhancer, which should be added to your middleware stack after applyMiddleware as applyMiddleware is potentially asynchronous. Otherwise, DevTools won’t see the raw actions emitted by asynchronous middleware such as redux-promise or redux-thunk.
To install, firstly import devTools into your root React component:
// Redux utility functions
import { compose, createStore, applyMiddleware } from 'redux';
// Redux DevTools store enhancers
import { devTools, persistState } from 'redux-devtools';
// React components for Redux DevTools
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';Then, add devTools to your store enhancers, and create your store:
const finalCreateStore = compose(
// Enables your middleware:
applyMiddleware(thunk),
// Provides support for DevTools:
devTools(),
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
createStore
);
const store = finalCreateStore(reducer);Finally, include the DevTools in your page. You may pass either LogMonitor (the default one) or any of the custom monitors described below. For convenience, you can use DebugPanel to dock DevTools to some part of the screen, but you can put it also somewhere else in the component tree.
export default class Root extends Component {
render() {
return (
<div>
<Provider store={store}>
{() => <CounterApp />}
</Provider>
<DebugPanel top right bottom>
<DevTools store={store} monitor={LogMonitor} />
</DebugPanel>
</div>
);
}
}This commit should give you an idea about how to add Redux DevTools for your app but make sure to only apply devTools() in development! In production, this will be terribly slow because actions just accumulate forever. (We'll need to implement a rolling window for dev too.)
For example, in Webpack, you can use DefinePlugin to turn magic constants like __DEV__ into true or false depending on the environment, and import and render redux-devtools conditionally behind if (__DEV__). Then, if you have an Uglify step before production, Uglify will eliminate dead if (false) branches with redux-devtools imports. Here is an example of adding React DevTools to a project handling the production case correctly.
You can do this:
git clone https://github.com/gaearon/redux-devtools.git
cd redux-devtools
npm install
cd examples/counter
npm install
npm start
open http://localhost:3000
Try clicking on actions in the log, or changing some code inside examples/counter/reducers/counter.
For fun, you can also open http://localhost:3000/?debug_session=123, click around, and then refresh.
Oh, and you can do the same with the TodoMVC example as well.
You can build a completely custom UI for it because <DevTools> accepts a monitor React component prop. The included LogMonitor is just an example.
I challenge you to build a custom monitor for Redux DevTools!
Some crazy ideas for custom monitors:
- A slider that lets you jump between computed states just by dragging it
- An in-app layer that shows the last N states right in the app (e.g. for animation)
- A time machine like interface where the last N states of your app reside on different Z layers
- Feel free to come up with and implement your own! Check
LogMonitorpropTypes to see what you can do.
In fact some of these are implemented already:
Create a PR to add your custom monitor.
MIT