mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-25 11:03:57 +03:00
Improve installation instructions by adding examples and note on middleware ordering
This commit is contained in:
parent
b09d171f2d
commit
c567bb2d72
41
README.md
41
README.md
|
@ -21,6 +21,47 @@ A live-editing time travel environment for Redux.
|
|||
npm install --save-dev redux-devtools
|
||||
```
|
||||
|
||||
DevTools is a middleware, which should be added to your middleware stack *after* `applyMiddleware` because `applyMiddleware` is potentially asynchronous. Otherwise, DevTools won't see the raw actions emitted by the Promise middleware etc.
|
||||
|
||||
To install, firstly import `devTools` into your App container:
|
||||
```
|
||||
import { devTools, persistState } from 'redux-devtools';
|
||||
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
|
||||
```
|
||||
|
||||
Then, add `devTools` to your middleware, and create your store:
|
||||
```
|
||||
const finalCreateStore = compose(
|
||||
applyMiddleware(thunk),
|
||||
devTools(),
|
||||
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
|
||||
createStore
|
||||
);
|
||||
|
||||
const store = finalCreateStore(reducer);
|
||||
```
|
||||
|
||||
Lastly, include the `DebugPanel` in your page:
|
||||
```
|
||||
export default class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Provider store={store}>
|
||||
{() => <CounterApp />}
|
||||
</Provider>
|
||||
<div>
|
||||
<Provider store={store}>
|
||||
{() => <CounterApp />}
|
||||
</Provider>
|
||||
<DebugPanel top right bottom key="debugPanel">
|
||||
<DevTools store={store} monitor={LogMonitor} />
|
||||
</DebugPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
[This commit](https://github.com/gaearon/redux-devtools/commit/0a2a97556e252bfad822ca438923774bc8b932a4) 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](https://github.com/erikras/react-redux-universal-hot-example/compare/66bf63fb0f23a3c264a5d37c3acb4c047bf0c0c9...c6515236a1def8a3d2bfeb8f6cd6f0ccdb2f9e1b) of adding React DevTools to a project handling the production case correctly.
|
||||
|
|
Loading…
Reference in New Issue
Block a user