From 1c022b8bc01475a549ce0ac8ff4bc8475af94ac8 Mon Sep 17 00:00:00 2001 From: Gregory Desfour Date: Tue, 29 Sep 2015 11:54:18 +0200 Subject: [PATCH] Rephrasing how to order the devtools and middleware calls --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 18942ba4..741ed159 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu 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). +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 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: @@ -57,6 +57,8 @@ const finalCreateStore = compose( 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. ```js