Skip to content

Commit 329b755

Browse files
committed
Update to Redux 2.0
1 parent 0609397 commit 329b755

File tree

7 files changed

+31
-30
lines changed

7 files changed

+31
-30
lines changed

README.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,8 @@ const finalCreateStore = compose(
4444
// Provides support for DevTools:
4545
devTools(),
4646
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
47-
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
48-
createStore
49-
);
47+
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
48+
)(createStore);
5049

5150
const store = finalCreateStore(reducer);
5251
```
@@ -70,9 +69,9 @@ export default class Root extends Component {
7069
}
7170
```
7271

73-
[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.)
72+
**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.)
7473

75-
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.
74+
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.
7675

7776
### Running Examples
7877

examples/counter/containers/App.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,18 @@ import * as reducers from '../reducers';
1010
const finalCreateStore = compose(
1111
applyMiddleware(thunk),
1212
devTools(),
13-
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
14-
createStore
15-
);
13+
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
14+
)(createStore);
1615

1716
const reducer = combineReducers(reducers);
1817
const store = finalCreateStore(reducer);
1918

19+
if (module.hot) {
20+
module.hot.accept('../reducers', () =>
21+
store.replaceReducer(combineReducers(require('../reducers')))
22+
);
23+
}
24+
2025
export default class App extends Component {
2126
render() {
2227
return (

examples/counter/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
"homepage": "https://github.com/gaearon/redux-devtools#readme",
1818
"dependencies": {
1919
"react": "^0.13.3",
20-
"react-redux": "^0.9.0",
21-
"redux": "^1.0.1",
20+
"react-redux": "^2.0.0",
21+
"redux": "^2.0.0",
2222
"redux-thunk": "^0.1.0"
2323
},
2424
"devDependencies": {

examples/todomvc/containers/App.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,18 @@ import * as reducers from '../reducers';
88

99
const finalCreateStore = compose(
1010
devTools(),
11-
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
12-
createStore
13-
);
11+
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
12+
)(createStore);
1413

1514
const reducer = combineReducers(reducers);
1615
const store = finalCreateStore(reducer);
1716

17+
if (module.hot) {
18+
module.hot.accept('../reducers', () =>
19+
store.replaceReducer(combineReducers(require('../reducers')))
20+
);
21+
}
22+
1823
export default class App extends Component {
1924
render() {
2025
return (

examples/todomvc/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
"dependencies": {
3131
"classnames": "^2.1.2",
3232
"react": "^0.13.3",
33-
"react-redux": "^0.9.0",
34-
"redux": "^1.0.1"
33+
"react-redux": "^2.0.0",
34+
"redux": "^2.0.0"
3535
},
3636
"devDependencies": {
3737
"babel-core": "^5.6.18",

package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,12 @@
4444
"rimraf": "^2.3.4"
4545
},
4646
"peerDependencies": {
47-
"redux": "^1.0.0 || 1.0.0-rc"
47+
"redux": "^2.0.0"
4848
},
4949
"dependencies": {
5050
"react-json-tree": "^0.1.3",
5151
"react-mixin": "^1.7.0",
52-
"react-redux": "^0.9.0",
53-
"redux": "^1.0.1"
52+
"react-redux": "^2.0.0",
53+
"redux": "^2.0.0"
5454
}
5555
}

src/createDevTools.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ActionCreators } from './devTools';
33

44
export default function createDevTools(React) {
55
const { PropTypes, Component } = React;
6-
const { Provider, connect } = createAll(React);
6+
const { connect } = createAll(React);
77

88
@connect(
99
state => state,
@@ -30,25 +30,17 @@ export default function createDevTools(React) {
3030
if (props.store && !props.store.devToolsStore) {
3131
console.error(
3232
'Could not find the devTools store inside your store. ' +
33-
'Have you applied devTools() higher-order store?'
33+
'Have you applied devTools() store enhancer?'
3434
);
3535
}
3636
super(props, context);
37-
this.renderDevTools = ::this.renderDevTools;
3837
}
3938

4039
render() {
41-
const { devToolsStore } = this.props.store;
4240
return (
43-
<Provider store={devToolsStore}>
44-
{this.renderDevTools}
45-
</Provider>
41+
<DevTools {...this.props}
42+
store={this.props.store.devToolsStore} />
4643
);
4744
}
48-
49-
renderDevTools() {
50-
const { store, ...rest } = this.props;
51-
return <DevTools {...rest} />;
52-
}
5345
};
5446
}

0 commit comments

Comments
 (0)