Port to React Redux 0.5.0

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);

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 (
-      <Connector select={state => ({ todos: state.todos })}>
-        {this.renderChild}
-      </Connector>
-    );
-  }
+    const { todos, actions } = this.props;
 
-  renderChild({ todos, dispatch }) {
-    const actions = bindActionCreators(TodoActions, dispatch);
     return (
       <div>
         <Header addTodo={actions.addTodo} />
@@ -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);

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": {

package.json

@@ -47,7 +47,7 @@
     "redux": "^1.0.0 || 1.0.0-rc"
   },
   "dependencies": {
-    "react-redux": "^0.2.2",
+    "react-redux": "^0.5.0",
     "redux": "^1.0.0-rc"
   }
 }

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 <Monitor {...this.props} />;
+    }
+  }
+
+  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 (
         <Provider store={devToolsStore}>
-          {this.renderRoot}
+          {this.renderDevTools}
         </Provider>
       );
     }
 
-    renderRoot = () => {
-      return (
-        <Connector>
-          {this.renderMonitor}
-        </Connector>
-      );
-    };
-
-    renderMonitor = ({ dispatch, ...state }) => {
-      const { monitor: Monitor, ...rest } = this.props;
-      return (
-        <Monitor {...state}
-                 {...bindActionCreators(ActionCreators, dispatch)}
-                 {...rest} />
-      );
-    };
+    renderDevTools() {
+      const { store, ...rest } = this.props;
+      return <DevTools {...rest} />;
+    }
   };
 }