这是我参与「第四届青训营 」笔记创作活动的的第5天

模型图

容器组件 作为 真正使用的ui组件 和 redux的 通信桥梁

使用步骤

1. src目录下创建redux文件夹(为了产出一个完整的store对象)

   

   1. 创建constant.js文件（对type值得重命名，方便写）
      里面暴露一个个值为字符串的常量用来做不同action的type

   2. 创建reducers文件夹（本质是区别传来的action对象的type，利用data进行不同的数据操作）
      

      • 里面是不同容器组件的reducer

      • 本质上是向外暴露了一个函数

      • 函数的功能是根据参数type对数据做相应的操作

      • 函数接受两个参数，第一个是之前的数据（要给初始值），第二个参数是action对象（{type：xxx，data：xxx}）

      import {ADD_PERSON} from '../constant'
      const initState = [{id:'001',name:'tom',age:18}]
      export default function personReducer(preState=initState,action){
          switch (type) {
              case ADD_PERSON: 
                  return [data,...preState]		
              default:
                  return preState
          }
      }
      
      

      5. 如果有多个上面这种文件在index.js中必须合并(为了在store.js中把全部reducers应用)（注意combineReducers里面的key就是redux管理的数据）

         

   3. 创建action文件夹(本质是暴露了很多函数，且返回值是action对象)
      

      1. 里面是不同的js文件（不同的文件为不同的容器组件提供产生action对象的函数）
      2. 每个文件分别暴露着很多函数，函数可以返回一般的action对象
      3. 函数也可以返回一个新的函数，这个新的函数可以收到dispatch参数，里面可以写异步任务，然后dispatch（{type：xxx，data：xxx}）使传入action对象的相应reducer处理（可以发网路请求，让后把结果给其他reducer处理）

      

   4. 创建store.js文件（本质是暴露一个配置好的store对象，他将redux和真正的react连接起来）
      

   

2. src目录下创建containers文件夹（创建容器组件）

   1. 为每一个容器对象创建一个文件夹

   2. 在相应文件夹下创建index.js

   3. 每个文件夹的index.js本质暴露了一个用connect将redux的数据和方法当props传入文件中由自己定义的组件的全新组件（容器组件）

   4. connect是一个返回函数的函数
      

      • 第一个函数接受两个参数
        --- 第一个是一个函数可以收到redux管理的数据，返回要传入person的props
        ---第二个参数是一个对象，包含着来自action文件夹得可以返回action对象得函数
      • 第二个函数接受在文件夹中定义得组件（所以在组件中可以收到第一个函数传人得props）

      connect(state => ({persons:state.persons,count:state.count}),{addPerson})（Person）
      

   5. 在ui组件使用props中action中方法 this.props.increment(11)
      即可产生{type:?increment,data:11}的action对象并自动dispatch修改数据

      import React, { Component } from 'react'
      import {increment,decrement,incrementAsync
      } from '../../redux/actions/count'
      import {connect} from 'react-redux'
      class Count extends Component {
          state = {carName:'奔驰c63'}
          increment = ()=>{
              const {value} = this.selectNumber
              this.props.increment(value*1)
          }
          decrement = ()=>{
                  const {value} = this.selectNumber
                  this.props.decrement(value*1)
          }
          incrementIfOdd = ()=>{
                  const {value} = this.selectNumber
                  if(this.props.count % 2 !== 0){
                          this.props.increment(value*1)
                  }
          }
          incrementAsync = ()=>{
                  const {value} = this.selectNumber
                  this.props.incrementAsync(value*1,500)
          }
          render() {
                  return (
                          <div>
                                  <h2>我是Count组件,下方组件总人数为:{this.props.renshu}</h2>
                                  <h4>当前求和为：{this.props.count}</h4>
                                  <select ref={c => this.selectNumber = c}>                                          <option value="1">1</option>                                           <option value="2">2</option>                                           <option value="3">3</option>
                              </select>&nbsp;
                                  <button onClick={this.increment}>+</button>&nbsp;
                                  <button onClick={this.decrement}>-</button>;
                                  <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                                  <button onClick={this.incrementAsync}></button>&nbsp;
                          </div>
                  )
          }
      }
      export default connect(state=>({count:state.count,  personCount:state.persons.length}),{increment,decrement,incrementAsync})(Count)
      

3. 在index.js中将App组件用Provider包起来并且传入 store