mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-25 02:53:53 +03:00
Merge remote-tracking branch 'gaearon/master'
Conflicts: package.json
This commit is contained in:
commit
c14dffc6b0
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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": {
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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} />
|
|
||||||
);
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user