容器组件container.jsx

    1. // 引入math（ui组件）
    2. import MathUI from '../../components/Math'
    4. import{ createIncrement,createDecrement, createAsyncIncrement} from '../../redux/count_redux/count_action'
    5. //引入store
    6. // import store from '../../redux/count_redux/store'
    8. //引入connect用于连接ui组件和redux
    9. import {connect} from 'react-redux'
    11. // mapStateProps返回一个对象
    12. // mapStateProps的返回值作为状态传递给UI组件
    13. //返回对象有key，value,相当于props中的key和value
    14. function mapStateProps(state){
    15.     return{count:state}
    16. }
    18. //mapDispatchToProps返回一个对象
    19. //mapDispatchToProps的返回值作为操作状态的方法传递给ui组件,
    20. //key就是传递给ui组件中props中的key,value就是传递给ui组件的props中的value
    21. function mapDispatchToProps(dispatch){
    22.     return {
    23.         jia:(data)=>{
    24.             dispatch(createIncrement(data))
    25.         },
    26.         jian:(data)=>{
    27.             dispatch(createDecrement(data))
    28.         },
    29.         jiaAsync:(data,time)=>{
    30.             dispatch(createAsyncIncrement(data,time))
    31.         }
    32.     }
    33. }
    34. //高阶函数，连接ui组件
    35. //使用connect创建并暴露一个math组件
    37. //connect第一个函数是映射ui组件和容器组件的关系，第二个组件是连接ui组件和容器组件
    38. export default connect(mapStateProps,mapDispatchToProps)(MathUI)

    1.这里的mapStateProp和mapDispatchToProps可以映射容器组件和ui组件
    2.这里的容器组件就相当于ui组件的父组件，容器组件通过mapStateProp来传递状态到ui组件。
    3.这里的mapStateProp函数可以接受到一个参数，这个参数是state获取redux的初始状态,等价于redux中的store.getState(),并且返回一个对象，key就是传递给ui组件的props的key，value就是传递给ui组件的props的value
    4.这里的mapDispatchToProps作为操作状态的方法，在ui组件中可以使用this.props。xxx()调用，mapDispatchToProps的参数是dispatch，用于将action传递给redux并且它返回一个对象，对象的key作为方法名，value是一个函数用于处理初始状态

    使用

    1. import React, { Component } from 'react'
    3. export default class index extends Component {
    4. componentDidMount(){
    6. }
    7.     //加
    8.     increment=()=>{
    9.   let {value}=this.selectNumber
    10.    this.props.jia(value*1)
    11.     }
    12.     //减
    13.     decrement=()=>{
    14.         let {value}=this.selectNumber
    15.         this.props.jian(value*1)
    17.     }
    18.     //异步加
    19.     asyncIcrement=()=>{
    20.         let {value}=this.selectNumber
    21.         this.props.jiaAsync(value*1,500)
    22.     }
    23.     //奇数加
    24.     oddIcrement=()=>{
    25.         let {value}=this.selectNumber
    26.         if(this.props.count%2!=0){
    27.             this.props.jia(value*1)
    28.         }
    29.     }
    30.     render() {
    31.         return (
    32.             <div>
    33.                 <h1>当前显示的数是:{this.props.count}</h1>
    34.                 <select ref={c=>this.selectNumber=c}>
    35.                     <option value="1">1</option>
    36.                     <option value="2">2</option>
    37.                     <option value="3">3</option>
    38.                 </select>
    39.                 <button onClick={this.increment}>加</button>&nbsp;&nbsp;&nbsp;
    40.                 <button onClick={this.decrement}>减</button>&nbsp;&nbsp;&nbsp;
    41.                 <button onClick={this.asyncIcrement}>异步加</button>&nbsp;&nbsp;&nbsp;
    42.                 <button onClick={this.oddIcrement}>奇数加</button>&nbsp;&nbsp;&nbsp;
    43.             </div>
    44.         )
    45.     }
    46. }