text: import React, { Component, PropTypes } from 'react'
  import { connect } from 'react-redux'
  import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters } from '../actions'
  import AddTodo from '../components/AddTodo'
  import TodoList from '../components/TodoList'
  import Footer from '../components/Footer'
  
  class App extends Component {
    render() {
      // Injected by connect() call:
      console.log(this.props);
      const { dispatch, visibleTodos, visibilityFilter } = this.props
      //onAddClick,onTodoClick,onFilterChange这三个事件都是用户自己定义的，react里面跟node一样可以自定义时间
      return (
        <div>
          <AddTodo
            onAddClick={text =>
              dispatch(addTodo(text))
            } />
          {/*onAddClick在AddTodo方法里接收到了text，然后*/}
          <TodoList
            todos={visibleTodos}
            onTodoClick={index =>
              dispatch(completeTodo(index))
            } />
          <Footer
            filter={visibilityFilter}
            onFilterChange={nextFilter =>
              dispatch(setVisibilityFilter(nextFilter))
            } />
        </div>
      )
    }
  }
  
  App.propTypes = {
    visibleTodos: PropTypes.arrayOf(PropTypes.shape({
      text: PropTypes.string.isRequired,
      completed: PropTypes.bool.isRequired
    }).isRequired).isRequired,
    visibilityFilter: PropTypes.oneOf([
      'SHOW_ALL',
      'SHOW_COMPLETED',
      'SHOW_ACTIVE'
    ]).isRequired
  }
  
  function selectTodos(todos, filter) {
    switch (filter) {
      case VisibilityFilters.SHOW_ALL:
        return todos
      case VisibilityFilters.SHOW_COMPLETED:
        return todos.filter(todo => todo.completed)
      case VisibilityFilters.SHOW_ACTIVE:
        return todos.filter(todo => !todo.completed)
    }
  }
  
  // Which props do we want to inject, given the global state?
  // Note: use https://github.com/faassen/reselect for better performance.
  function select(state) {
    console.log(state)
    return {
      visibleTodos: selectTodos(state.todos, state.visibilityFilter),
      visibilityFilter: state.visibilityFilter
    }
  }
  
  // 包装 component ，注入 dispatch 和 state 到其默认的 connect(select)(App) 中；
  export default connect(select)(App)//将dispatch 和state注入到App中方便子组件访问 