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
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 ProvidePlugin 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