Merge remote-tracking branch 'gaearon/master'

Conflicts:
	package.json
This commit is contained in:
dzannotti 2015-08-07 17:56:39 +01:00
commit c14dffc6b0
5 changed files with 48 additions and 37 deletions

View File

@ -4,10 +4,7 @@ import { connect } from 'react-redux';
import Counter from '../components/Counter'; import Counter from '../components/Counter';
import * as CounterActions from '../actions/CounterActions'; import * as CounterActions from '../actions/CounterActions';
@connect(state => ({ class CounterApp extends Component {
counter: state.counter
}))
export default class CounterApp extends Component {
render() { render() {
const { counter, dispatch } = this.props; const { counter, dispatch } = this.props;
return ( return (
@ -16,3 +13,11 @@ export default class CounterApp extends Component {
); );
} }
} }
function select(state) {
return {
counter: state.counter
};
}
export default connect(select)(CounterApp);

View File

@ -1,21 +1,14 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { Connector } from 'react-redux';
import Header from '../components/Header'; import Header from '../components/Header';
import MainSection from '../components/MainSection'; import MainSection from '../components/MainSection';
import * as TodoActions from '../actions/TodoActions'; import * as TodoActions from '../actions/TodoActions';
export default class TodoApp extends Component { class TodoApp extends Component {
render() { render() {
return ( const { todos, actions } = this.props;
<Connector select={state => ({ todos: state.todos })}>
{this.renderChild}
</Connector>
);
}
renderChild({ todos, dispatch }) {
const actions = bindActionCreators(TodoActions, dispatch);
return ( return (
<div> <div>
<Header addTodo={actions.addTodo} /> <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);

View File

@ -30,7 +30,7 @@
"dependencies": { "dependencies": {
"classnames": "^2.1.2", "classnames": "^2.1.2",
"react": "^0.13.3", "react": "^0.13.3",
"react-redux": "^0.2.1", "react-redux": "^0.5.0",
"redux": "^1.0.0-rc" "redux": "^1.0.0-rc"
}, },
"devDependencies": { "devDependencies": {

View File

@ -1,6 +1,6 @@
{ {
"name": "redux-devtools", "name": "redux-devtools",
"version": "0.1.3", "version": "0.2.0",
"description": "Redux DevTools with hot reloading and time travel", "description": "Redux DevTools with hot reloading and time travel",
"main": "lib/index.js", "main": "lib/index.js",
"scripts": { "scripts": {
@ -48,7 +48,7 @@
}, },
"dependencies": { "dependencies": {
"react-mixin": "^1.7.0", "react-mixin": "^1.7.0",
"react-redux": "^0.2.2", "react-redux": "^0.5.0",
"redux": "^1.0.0-rc" "redux": "^1.0.0-rc"
} }
} }

View File

@ -1,12 +1,22 @@
import createAll from 'react-redux/lib/components/createAll'; import createAll from 'react-redux/lib/components/createAll';
import { bindActionCreators } from 'redux';
import { ActionCreators } from './devTools'; import { ActionCreators } from './devTools';
export default function createDevTools(React) { export default function createDevTools(React) {
const { PropTypes, Component } = 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 = { static propTypes = {
monitor: PropTypes.func.isRequired, monitor: PropTypes.func.isRequired,
store: PropTypes.shape({ store: PropTypes.shape({
@ -24,32 +34,21 @@ export default function createDevTools(React) {
); );
} }
super(props, context); super(props, context);
this.renderDevTools = ::this.renderDevTools;
} }
render() { render() {
const { devToolsStore } = this.props.store; const { devToolsStore } = this.props.store;
return ( return (
<Provider store={devToolsStore}> <Provider store={devToolsStore}>
{this.renderRoot} {this.renderDevTools}
</Provider> </Provider>
); );
} }
renderRoot = () => { renderDevTools() {
return ( const { store, ...rest } = this.props;
<Connector> return <DevTools {...rest} />;
{this.renderMonitor} }
</Connector>
);
};
renderMonitor = ({ dispatch, ...state }) => {
const { monitor: Monitor, ...rest } = this.props;
return (
<Monitor {...state}
{...bindActionCreators(ActionCreators, dispatch)}
{...rest} />
);
};
}; };
} }