Rephrasing how to order the devtools and middleware calls

This commit is contained in:
Gregory Desfour 2015-09-29 11:54:18 +02:00
parent cbbaaef554
commit 1c022b8bc0

View File

@ -29,7 +29,7 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu
npm install --save-dev redux-devtools 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 wont 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). DevTools is a [store enhancer](http://rackt.github.io/redux/docs/Glossary.html#store-enhancer), which should be added to your middleware stack *before* [`applyMiddleware`](http://rackt.github.io/redux/docs/api/applyMiddleware.html) as `applyMiddleware` is potentially asynchronous. Otherwise, DevTools wont 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: To install, firstly import `devTools` into your root React component:
@ -57,6 +57,8 @@ const finalCreateStore = compose(
const store = finalCreateStore(reducer); const store = finalCreateStore(reducer);
``` ```
Note in the code above, the call to `devTools` appears *after* `applyMiddleware` because the `compose` utility composes the function arguments from right to left. So in effect, `applyMiddleware` will be called last.
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. 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 ```js