mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-22 09:36:43 +03:00
Update to Redux 2.0
This commit is contained in:
parent
0609397636
commit
329b755a3a
|
@ -44,9 +44,8 @@ const finalCreateStore = compose(
|
|||
// Provides support for DevTools:
|
||||
devTools(),
|
||||
// Lets you write ?debug_session=<name> 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
|
||||
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<Provider store={devToolsStore}>
|
||||
{this.renderDevTools}
|
||||
</Provider>
|
||||
<DevTools {...this.props}
|
||||
store={this.props.store.devToolsStore} />
|
||||
);
|
||||
}
|
||||
|
||||
renderDevTools() {
|
||||
const { store, ...rest } = this.props;
|
||||
return <DevTools {...rest} />;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user