diff --git a/examples/counter/containers/CounterApp.js b/examples/counter/containers/CounterApp.js
index f0813c89..d97d02df 100644
--- a/examples/counter/containers/CounterApp.js
+++ b/examples/counter/containers/CounterApp.js
@@ -4,10 +4,7 @@ import { connect } from 'react-redux';
import Counter from '../components/Counter';
import * as CounterActions from '../actions/CounterActions';
-@connect(state => ({
- counter: state.counter
-}))
-export default class CounterApp extends Component {
+class CounterApp extends Component {
render() {
const { counter, dispatch } = this.props;
return (
@@ -16,3 +13,11 @@ export default class CounterApp extends Component {
);
}
}
+
+function select(state) {
+ return {
+ counter: state.counter
+ };
+}
+
+export default connect(select)(CounterApp);
diff --git a/examples/todomvc/containers/TodoApp.js b/examples/todomvc/containers/TodoApp.js
index 6dec17af..8ce5a977 100644
--- a/examples/todomvc/containers/TodoApp.js
+++ b/examples/todomvc/containers/TodoApp.js
@@ -1,21 +1,14 @@
import React, { Component } from 'react';
+import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Connector } from 'react-redux';
import Header from '../components/Header';
import MainSection from '../components/MainSection';
import * as TodoActions from '../actions/TodoActions';
-export default class TodoApp extends Component {
+class TodoApp extends Component {
render() {
- return (
- ({ todos: state.todos })}>
- {this.renderChild}
-
- );
- }
+ const { todos, actions } = this.props;
- renderChild({ todos, dispatch }) {
- const actions = bindActionCreators(TodoActions, dispatch);
return (
@@ -24,3 +17,17 @@ export default class TodoApp extends Component {
);
}
}
+
+function mapState(state) {
+ return {
+ todos: state.todos
+ };
+}
+
+function mapDispatch(dispatch) {
+ return {
+ actions: bindActionCreators(TodoActions, dispatch)
+ };
+}
+
+export default connect(mapState, mapDispatch)(TodoApp);
diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json
index de4ad8d4..1eeb89de 100644
--- a/examples/todomvc/package.json
+++ b/examples/todomvc/package.json
@@ -30,7 +30,7 @@
"dependencies": {
"classnames": "^2.1.2",
"react": "^0.13.3",
- "react-redux": "^0.2.1",
+ "react-redux": "^0.5.0",
"redux": "^1.0.0-rc"
},
"devDependencies": {
diff --git a/package.json b/package.json
index c66dd0d4..78c1f8bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "redux-devtools",
- "version": "0.1.3",
+ "version": "0.2.0",
"description": "Redux DevTools with hot reloading and time travel",
"main": "lib/index.js",
"scripts": {
@@ -48,7 +48,7 @@
},
"dependencies": {
"react-mixin": "^1.7.0",
- "react-redux": "^0.2.2",
+ "react-redux": "^0.5.0",
"redux": "^1.0.0-rc"
}
}
diff --git a/src/createDevTools.js b/src/createDevTools.js
index 127f235c..d2eaa4e5 100644
--- a/src/createDevTools.js
+++ b/src/createDevTools.js
@@ -1,12 +1,22 @@
import createAll from 'react-redux/lib/components/createAll';
-import { bindActionCreators } from 'redux';
import { ActionCreators } from './devTools';
export default function createDevTools(React) {
const { PropTypes, Component } = React;
- const { Provider, Connector } = createAll(React);
+ const { Provider, connect } = createAll(React);
- return class DevTools extends Component {
+ @connect(
+ state => state,
+ ActionCreators
+ )
+ class DevTools extends Component {
+ render() {
+ const { monitor: Monitor } = this.props;
+ return
;
+ }
+ }
+
+ return class DevToolsWrapper extends Component {
static propTypes = {
monitor: PropTypes.func.isRequired,
store: PropTypes.shape({
@@ -24,32 +34,21 @@ export default function createDevTools(React) {
);
}
super(props, context);
+ this.renderDevTools = ::this.renderDevTools;
}
render() {
const { devToolsStore } = this.props.store;
return (
- {this.renderRoot}
+ {this.renderDevTools}
);
}
- renderRoot = () => {
- return (
-
- {this.renderMonitor}
-
- );
- };
-
- renderMonitor = ({ dispatch, ...state }) => {
- const { monitor: Monitor, ...rest } = this.props;
- return (
-
- );
- };
+ renderDevTools() {
+ const { store, ...rest } = this.props;
+ return
;
+ }
};
}