220、react-redux，把redux状态和React-Router路由连起来

注意：前端单页面应用，就是把状态和路由连起来，同时注意嵌套
class App extends Component {
  render() {
    return(
        <div>
          {this.props.children}  
        </div>
    )
  }
}
let routes = (
  <Route component={App}>
    <Route component={Public}>
      <Route path="/" component={index}/>
      <Route path="/carDetail" component={carDetail}/>
      <Route path="/useCarLogin" component={useCarLogin}/>
      <Route path="/useCarCheck" component={useCarCheck}/>
      <Route path="/faultMessage" component={faultMessage}/>
      <Route path="/feelMessage" component={feelMessage}/>
      <Route path="/subscribeOrder" component={subscribeOrder} />
      <Route path="/shareOrder" component={shareOrder} />
      <Route path="/withdrawOrder" component={withdrawOrder} />
      <Route path="/userLogin" component={userLogin} />
      <Route path="/userManager" component={userManager} />
      <Route path="/logoDetail" component={logoDetail} />
    </Route>
    <Route path="*" component={NotFound} />
  </Route>
)
ReactDOM.render(
  <Provider store={store}>
    <div>
      <Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory} children={routes}></Router>
    </div>
  </Provider>,
  document.getElementById('app')
)
document.body.removeChild(document.getElementById('svganimate'));

一、React-Redux 将所有组件分成两大类：UI 组件 和 容器组件 
1、UI 组件：负责 UI 的呈现，即 UI 本身、接收数据和派发行为，由用户提供。
2、容器组件：负责管理数据和业务逻辑，由 React-Redux 自动生成。
二、容器组件 LastList 的构成
1、UI组件StartList的定义
class StartList extends Component {
  render() {
    const { openDialogue, detail } = this.props;//closeDialogue 和 close没有被解构赋值
    //this.props包含3部分：(1)mapStateToProps遍历的内容(2)mapDispatchToProps遍历的内容(3)容器标签携带的内容
    //如果mapDispatchToProps缺失，那么(2)将被dispatch取代。
    return (
      <div>
        <div>页面内容</div>
        <button onClick={ openDialogue }>{detail}</button>
      </div>
      <div>
        <div>弹窗内容</div>
        <button onClick={ this.props.closeDialogue }>{this.props.close}</button>
      </div>
    )
  }
}
2、mapStateToProps方法定义。负责输入逻辑，即将state映射到 UI 组件的参数（props），
  function mapStateToProps (state){
    return {
      todos: state.todos//todos: getVisibleTodos(state.todos, state.visibilityFilter)
    }
  }
3、mapDispatchToProps方法定义。负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。
  const mapDispatchToProps = {
    closeDialogue: function(ownProps){
      return {
        type: 'dialogue',
        filter: ownProps.filter
      }
    }
  }
  const mapDispatchToProps = {
    onClick: (ownProps) => {
      type: 'dialogue',
      filter: ownProps.filter
    };
  }
  function mapDispatchToProps (dispatch, ownProps) {//ownProps（容器组件的props对象）
    return {
      openDialogue: function(){
        //1、同步请求时，此处只有下面这些代码
        //2、异步请求时，此处将 ownProps 里的部分数据作为参数，向后台发送请求，获取返回值 result，在成功的回调里执行下面这些代码
        dispatch({
          type: 'dialogue',
          isShow: true
        });
        dispatch({
          type: 'detail',
          data: result
        });
      },
      closeDialogue: function(){
        dispatch({
          type: 'dialogue',
          isShow: false
        });
      },
    };
  }
4、容器组件LastList的定义。接收数据和派发行为，即把 mapStateToProps 和 mapDispatchToProps 传给 StartList 。
  const LastList = connect(
    mapStateToProps,
    mapDispatchToProps
  )(StartList)
  <LastList detail="详情" close="关闭"/>

//附：简单实例
class ProjectNumber extends Component {
  state = {
    visible: false
  };
  showModal(){
    const projectId = this.props.record.id;
    this.props.dispatch(getCarInfo(projectId));
    this.setState({
      visible: true,
    });
  };
  render() {
    return (
      <div>
        <span onClick={this.showModal.bind(this)}>{this.props.record}</span>
        <Modal visible={this.state.visible}></Modal>
      </div>
    );
  }
}