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 d3af1f05..5b8be213 100644 --- a/package.json +++ b/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" } } 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 ; + } }; }