From 1c022b8bc01475a549ce0ac8ff4bc8475af94ac8 Mon Sep 17 00:00:00 2001 From: Gregory Desfour Date: Tue, 29 Sep 2015 11:54:18 +0200 Subject: [PATCH 01/11] 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 From 8a2ce4226837fd9e152707d4cad37f6a091149cb Mon Sep 17 00:00:00 2001 From: Gregory Desfour Date: Wed, 30 Sep 2015 22:15:00 +0200 Subject: [PATCH 02/11] Revert "Rephrasing how to order the devtools and middleware calls" This reverts commit 1c022b8bc01475a549ce0ac8ff4bc8475af94ac8. --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 741ed159..18942ba4 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 *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). +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: @@ -57,8 +57,6 @@ 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 From 239ec691f2b92c422cc3a59e4ccf70faaa0d98bb Mon Sep 17 00:00:00 2001 From: Gregory Desfour Date: Wed, 30 Sep 2015 22:27:49 +0200 Subject: [PATCH 03/11] Explicitly tell devTools should be called after in the composed functions list. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 18942ba4..c1ed8693 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 *after* [`applyMiddleware`](http://rackt.github.io/redux/docs/api/applyMiddleware.html) in the `compose`d functions, 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: From ec6c650b5181e1771b21627f99a94b70e3cc701c Mon Sep 17 00:00:00 2001 From: Dylan Kirby Date: Fri, 2 Oct 2015 13:42:25 -0400 Subject: [PATCH 04/11] :memo: Fix typo in docs re-evaluted -> re-evalutated --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c1ed8693..3c4ec054 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu * 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 you change the reducer code, each “staged” action will be re-evaluated * 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: ` state.todos} store={store} monitor={LogMonitor} />` From bfbacefae7ec8d5f2a04c155241501047e1e94e5 Mon Sep 17 00:00:00 2001 From: Daniel Bugl Date: Thu, 15 Oct 2015 21:16:33 +0200 Subject: [PATCH 05/11] prevent possible errors in example I just ran into this issue and thought it might be react 0.14, then I realized I didn't `npm install` in the root directory :grin: --- examples/todomvc/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/todomvc/README.md b/examples/todomvc/README.md index da2a8208..012cb007 100644 --- a/examples/todomvc/README.md +++ b/examples/todomvc/README.md @@ -2,5 +2,6 @@ ## Getting Started -1. Install dependencies: `npm i` -2. Start the development server: `npm start` +1. Install dependencies in the root folder: `cd ../..` and `npm i` +2. Install dependencies in the example folder: `cd examples/todomvc` and `npm i` +3. Start the development server: `npm start` From c13a911a0fc6449cf038cbdeb72f3b7e4886dd59 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 16 Oct 2015 20:57:15 +0300 Subject: [PATCH 06/11] Update README.md --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 3c4ec054..6a0b8289 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ +>### React 0.14 Support +>React 0.14 support is coming, but it’s not ready yet. +>Please wait until next week to get it. + + Redux DevTools ========================= From 578dddbc5bf635051fd923e81c67d2d19bc1cfd8 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 17 Oct 2015 04:33:23 +0300 Subject: [PATCH 07/11] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6a0b8289..a0bbc193 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ >### React 0.14 Support ->React 0.14 support is coming, but it’s not ready yet. ->Please wait until next week to get it. +>React 0.14 support is coming in the `next` branch. +>[Helps us test it](https://github.com/gaearon/redux-devtools/releases/tag/v3.0.0-beta-2) to get it sooner. Redux DevTools From 28c20623901d37b2475139c7d1143eb2278709b8 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 17 Oct 2015 14:15:59 +0300 Subject: [PATCH 08/11] Add some troubleshooting --- README.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a0bbc193..ad6f078f 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,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) in the `compose`d functions, 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). To install, firstly import `devTools` into your root React component: ```js @@ -81,9 +80,13 @@ export default class Root extends Component { } ``` -**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.) +### Gotchas -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. +* **Your reducers have to be pure and free of side effects to work correctly with DevTools.** For example, even generating a random ID in reducer makes it impure and non-deterministic. Instead, do this in action creators. + +* **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. + +* **It is important that `devTools()` store enhancer should be added to your middleware stack *after* [`applyMiddleware`](http://rackt.github.io/redux/docs/api/applyMiddleware.html) in the `compose`d functions, 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). ### Running Examples From 35359e2538731caa7283cd2e441b30975425f6fb Mon Sep 17 00:00:00 2001 From: Michael J Hoffman Date: Mon, 9 Nov 2015 21:42:58 -0500 Subject: [PATCH 09/11] docs(readme): update reactiflux badge --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ad6f078f..04327127 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu [![build status](https://img.shields.io/travis/gaearon/redux-devtools/master.svg?style=flat-square)](https://travis-ci.org/gaearon/redux-devtools) [![npm version](https://img.shields.io/npm/v/redux-devtools.svg?style=flat-square)](https://www.npmjs.com/package/redux-devtools) [![npm downloads](https://img.shields.io/npm/dm/redux-devtools.svg?style=flat-square)](https://www.npmjs.com/package/redux-devtools) -[![redux channel on slack](https://img.shields.io/badge/slack-redux@reactiflux-61DAFB.svg?style=flat-square)](http://www.reactiflux.com) +[![redux channel on discord](https://img.shields.io/badge/discord-redux@reactiflux-738bd7.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bWb10Ma) ![](http://i.imgur.com/J4GeW0M.gif) From 56e9914c5c5fcb1e2783c9369ccc8cc898ddf079 Mon Sep 17 00:00:00 2001 From: Lee Bannard Date: Sat, 12 Dec 2015 23:46:24 +0000 Subject: [PATCH 10/11] Update .travis.yml --- .travis.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index c42701ff..cb0b166d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,4 @@ language: node_js node_js: - - "iojs" + - "4" + - "5" From f028569a60903af896d1c972229b8789457299fe Mon Sep 17 00:00:00 2001 From: Lee Bannard Date: Sun, 13 Dec 2015 00:01:31 +0000 Subject: [PATCH 11/11] Update .travis.yml --- .travis.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index cb0b166d..24a8ab9d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,4 +1,3 @@ language: node_js node_js: - - "4" - "5"