mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-28 20:43:56 +03:00
131 lines
5.7 KiB
Markdown
131 lines
5.7 KiB
Markdown
Redux DevTools
|
||
=========================
|
||
|
||
A live-editing time travel environment for [Redux](https://github.com/rackt/redux).
|
||
**[See Dan's React Europe talk demoing it!](http://youtube.com/watch?v=xsSnOQynTHs)**
|
||
|
||
|
||
|
||
### Features
|
||
|
||
* 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 `select` prop on the DevTools component: `<DevTools select={state => state.todos} store={store} monitor={LogMonitor} />`
|
||
* Toggle visibility with Ctrl+H
|
||
* To hide the devtools on load, set `visibleOnLoad` to false, e.g.: `<DevTools store={store} monitor={LogMonitor} visibleOnLoad={false} />`
|
||
|
||
### Installation
|
||
|
||
```
|
||
npm install --save-dev redux-devtools
|
||
```
|
||
|
||
DevTools is a [store enhancer](http://rackt.github.io/redux/docs/Glossary.html#store-enhancer), which should be added to your middleware stack *after* [`applyMiddleware`](http://rackt.github.io/redux/docs/api/applyMiddleware.html) as `applyMiddleware` is potentially asynchronous. Otherwise, DevTools won’t see the raw actions emitted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk).
|
||
|
||
To install, firstly import `devTools` into your root React component:
|
||
|
||
```js
|
||
// 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:
|
||
|
||
```js
|
||
const finalCreateStore = compose(
|
||
// Enables your middleware:
|
||
applyMiddleware(m1, m2, m3), // any Redux middleware, e.g. redux-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.
|
||
|
||
```js
|
||
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>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
**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](https://github.com/erikras/react-redux-universal-hot-example/) that adds Redux DevTools handling the production case correctly.
|
||
|
||
### Running Examples
|
||
|
||
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.
|
||
|
||
### Custom Monitors
|
||
|
||
**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!](https://github.com/gaearon/redux-devtools/issues/3)**
|
||
|
||
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 `LogMonitor` propTypes to see what you can do.
|
||
|
||
In fact some of these are implemented already:
|
||
|
||
#### [redux-devtools-diff-monitor](https://github.com/whetstone/redux-devtools-diff-monitor)
|
||
|
||
|
||
|
||
#### [redux-slider-monitor](https://github.com/calesce/redux-slider-monitor)
|
||
|
||
|
||
|
||
#### [redux-devtools-gentest-plugin](https://github.com/lapanoid/redux-devtools-gentest-plugin)
|
||
|
||
|
||
|
||
#### Keep them coming!
|
||
|
||
Create a PR to add your custom monitor.
|
||
|
||
### License
|
||
|
||
MIT
|