diff --git a/examples/todomvc/actions/TodoActions.js b/examples/todomvc/actions/todos.js similarity index 100% rename from examples/todomvc/actions/TodoActions.js rename to examples/todomvc/actions/todos.js diff --git a/examples/todomvc/containers/App.js b/examples/todomvc/containers/App.js index 6512d9c..4f6a6d3 100644 --- a/examples/todomvc/containers/App.js +++ b/examples/todomvc/containers/App.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import {Content, TestMonitor} from '../../../src'; +import {Content, TestMonitor} from '../../../lib'; import TodoApp from './TodoApp'; import { createStore, combineReducers, compose } from 'redux'; import { devTools, persistState } from 'redux-devtools'; @@ -9,9 +9,8 @@ import * as reducers from '../reducers'; const finalCreateStore = compose( devTools(), - persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)), - createStore -); + persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)) +)(createStore); const reducer = combineReducers(reducers); const store = finalCreateStore(reducer); @@ -28,10 +27,12 @@ export default class App extends Component { monitor={LogMonitor} /> - + ); } } + + diff --git a/examples/todomvc/containers/TodoApp.js b/examples/todomvc/containers/TodoApp.js index 6dec17a..887f309 100644 --- a/examples/todomvc/containers/TodoApp.js +++ b/examples/todomvc/containers/TodoApp.js @@ -1,21 +1,15 @@ -import React, { Component } from 'react'; +import React, { Component, PropTypes } from 'react'; import { bindActionCreators } from 'redux'; -import { Connector } from 'react-redux'; +import { connect } from 'react-redux'; import Header from '../components/Header'; import MainSection from '../components/MainSection'; -import * as TodoActions from '../actions/TodoActions'; +import * as TodoActions from '../actions/todos'; -export default class TodoApp extends Component { +class App extends Component { render() { - return ( - ({ todos: state.todos })}> - {this.renderChild} - - ); - } - - renderChild({ todos, dispatch }) { + const { todos, dispatch } = this.props; const actions = bindActionCreators(TodoActions, dispatch); + return (
@@ -24,3 +18,16 @@ export default class TodoApp extends Component { ); } } + +App.propTypes = { + todos: PropTypes.array.isRequired, + dispatch: PropTypes.func.isRequired +}; + +function mapStateToProps(state) { + return { + todos: state.todos + }; +} + +export default connect(mapStateToProps)(App); \ No newline at end of file diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json index de518e7..720d04e 100644 --- a/examples/todomvc/package.json +++ b/examples/todomvc/package.json @@ -34,6 +34,7 @@ "react-redux": "^3.0.1" }, "devDependencies": { + "babel": "^5.8.23", "babel-core": "^5.6.18", "babel-loader": "^5.1.4", "chai": "^3.0.0", @@ -41,7 +42,7 @@ "node-libs-browser": "^0.5.2", "raw-loader": "^0.5.1", "react-hot-loader": "^1.2.7", - "redux-devtools": "^0.1.1", + "redux-devtools": "^2.1.5", "style-loader": "^0.12.3", "todomvc-app-css": "^2.0.1", "webpack": "^1.9.11", diff --git a/src/components/Content.js b/src/components/Content.js index 2481ea5..b42eeec 100644 --- a/src/components/Content.js +++ b/src/components/Content.js @@ -1,7 +1,13 @@ import React, { Component } from 'react'; export default class Content extends Component { - render() { - return
{this.props.children}
; - } + render() { + return
{this.props.children}
; + } } \ No newline at end of file diff --git a/src/components/TestMonitor.js b/src/components/TestMonitor.js index 3495a3b..1590d7a 100644 --- a/src/components/TestMonitor.js +++ b/src/components/TestMonitor.js @@ -6,55 +6,68 @@ import PureComponent from 'react-pure-render/component'; import R from 'ramda'; export default class TestMonitor extends PureComponent { - constructor() { - super(); - this.state = { - describeText: '' - } + constructor() { + super(); + this.state = { + describeText: '' } + } - onDescribeNewText(text) { - this.setState({describeText: text}) - } + onDescribeNewText(text) { + this.setState({describeText: text}) + } + + render() { + const { stagedActions, computedStates }= this.props; - render() { - const { stagedActions, computedStates }= this.props; - - const countOfActionsAndStores = R.range(0, stagedActions.length); - - const items = R.map((index)=> { - if (index === 0) { - return { - action: { - type: '@@INIT' - }, - curState: {}, - nextState: computedStates[0].state, - index: index - } - } - - return { - index: index, - action: stagedActions[index], - curState: computedStates[index - 1].state, - nextState: computedStates[index].state - } + const countOfActionsAndStores = R.range(0, stagedActions.length); + + const items = R.map((index)=> { + if (index === 0) { + return { + action: { + type: '@@INIT' }, - countOfActionsAndStores); - - return ( -
- -
- -
-

Click the button to copy some text

- - - -
-
- ); - } + curState: {}, + nextState: computedStates[0].state, + index: index + } + } + + return { + index: index, + action: stagedActions[index], + curState: computedStates[index - 1].state, + nextState: computedStates[index].state + } + }, + countOfActionsAndStores); + + return ( +
+
+ +
+ +
+

Click the button to copy some text

+ + + +
+
+
+ ); + } } \ No newline at end of file