From 329b755a3af519e9fed7c9eac9e62b6c72611e16 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 1 Sep 2015 04:40:45 +0300 Subject: [PATCH] Update to Redux 2.0 --- README.md | 9 ++++----- examples/counter/containers/App.js | 11 ++++++++--- examples/counter/package.json | 4 ++-- examples/todomvc/containers/App.js | 11 ++++++++--- examples/todomvc/package.json | 4 ++-- package.json | 6 +++--- src/createDevTools.js | 16 ++++------------ 7 files changed, 31 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index a8b9436a..0bd78c0d 100644 --- a/README.md +++ b/README.md @@ -44,9 +44,8 @@ const finalCreateStore = compose( // Provides support for DevTools: devTools(), // Lets you write ?debug_session= in address bar to persist debug sessions - persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)), - createStore -); + persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)) +)(createStore); const store = finalCreateStore(reducer); ``` @@ -70,9 +69,9 @@ export default class Root extends Component { } ``` -[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.) +**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. +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 diff --git a/examples/counter/containers/App.js b/examples/counter/containers/App.js index 4da345c9..322746cc 100644 --- a/examples/counter/containers/App.js +++ b/examples/counter/containers/App.js @@ -10,13 +10,18 @@ import * as reducers from '../reducers'; const finalCreateStore = compose( applyMiddleware(thunk), devTools(), - persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)), - createStore -); + persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)) +)(createStore); const reducer = combineReducers(reducers); const store = finalCreateStore(reducer); +if (module.hot) { + module.hot.accept('../reducers', () => + store.replaceReducer(combineReducers(require('../reducers'))) + ); +} + export default class App extends Component { render() { return ( diff --git a/examples/counter/package.json b/examples/counter/package.json index d794b0d4..39b60e5f 100644 --- a/examples/counter/package.json +++ b/examples/counter/package.json @@ -17,8 +17,8 @@ "homepage": "https://github.com/gaearon/redux-devtools#readme", "dependencies": { "react": "^0.13.3", - "react-redux": "^0.9.0", - "redux": "^1.0.1", + "react-redux": "^2.0.0", + "redux": "^2.0.0", "redux-thunk": "^0.1.0" }, "devDependencies": { diff --git a/examples/todomvc/containers/App.js b/examples/todomvc/containers/App.js index dc7e34ad..675c452f 100644 --- a/examples/todomvc/containers/App.js +++ b/examples/todomvc/containers/App.js @@ -8,13 +8,18 @@ import * as reducers from '../reducers'; const finalCreateStore = compose( devTools(), - persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)), - createStore -); + persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)) +)(createStore); const reducer = combineReducers(reducers); const store = finalCreateStore(reducer); +if (module.hot) { + module.hot.accept('../reducers', () => + store.replaceReducer(combineReducers(require('../reducers'))) + ); +} + export default class App extends Component { render() { return ( diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json index be0f7510..5517bc15 100644 --- a/examples/todomvc/package.json +++ b/examples/todomvc/package.json @@ -30,8 +30,8 @@ "dependencies": { "classnames": "^2.1.2", "react": "^0.13.3", - "react-redux": "^0.9.0", - "redux": "^1.0.1" + "react-redux": "^2.0.0", + "redux": "^2.0.0" }, "devDependencies": { "babel-core": "^5.6.18", diff --git a/package.json b/package.json index f0af5915..211e58e2 100644 --- a/package.json +++ b/package.json @@ -44,12 +44,12 @@ "rimraf": "^2.3.4" }, "peerDependencies": { - "redux": "^1.0.0 || 1.0.0-rc" + "redux": "^2.0.0" }, "dependencies": { "react-json-tree": "^0.1.3", "react-mixin": "^1.7.0", - "react-redux": "^0.9.0", - "redux": "^1.0.1" + "react-redux": "^2.0.0", + "redux": "^2.0.0" } } diff --git a/src/createDevTools.js b/src/createDevTools.js index d2eaa4e5..b5eecadd 100644 --- a/src/createDevTools.js +++ b/src/createDevTools.js @@ -3,7 +3,7 @@ import { ActionCreators } from './devTools'; export default function createDevTools(React) { const { PropTypes, Component } = React; - const { Provider, connect } = createAll(React); + const { connect } = createAll(React); @connect( state => state, @@ -30,25 +30,17 @@ export default function createDevTools(React) { if (props.store && !props.store.devToolsStore) { console.error( 'Could not find the devTools store inside your store. ' + - 'Have you applied devTools() higher-order store?' + 'Have you applied devTools() store enhancer?' ); } super(props, context); - this.renderDevTools = ::this.renderDevTools; } render() { - const { devToolsStore } = this.props.store; return ( - - {this.renderDevTools} - + ); } - - renderDevTools() { - const { store, ...rest } = this.props; - return ; - } }; }