React学习25（react-redux基本使用 ）

安装包：npm i react-redux

react-redux原理图

明确两个概念

UI组件：不能使用任何redux的api，只负责页面的呈现，交互等

容器组件：负责和redux通信，将结果交给UI组件

如何创建一个容器组件

靠react-redux的connect函数

connect(mapStateToProps, mapDispatchToProps)(UI组件)
-mapStateToProps：映射状态，返回值是一个对象
-mapDispatchToProps：映射操作状态的方法，返回值是一个对象

container-Count-index.jsx

//引入CountUI组件
import CountUI from '../../components/Count'
//引入connect用于连接UI组件和redux
import {connect} from 'react-redux'
//引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'

/*
  1.//mapStateToProps返函数回的是一个对象
  2.返回的对象的kye就作为传递给UI组件props中的key，value就作为传递给UI组件props中的value
  3.mapStateToProps用于传递状态
*/
function mapStateToProps(state) {
  return {count:state}
}
/*
  1.mapDispatchToProps函数返回的是一个对象
  2.返回的对象的kye就作为传递给UI组件props中的key，value就作为传递给UI组件props中的value
  3.mapDispatchToProps操作状态的方法
*/
function mapDispatchToProps(dispatch) {
  return {
    jia:(number) => {
    //通知redux执行加法
    dispatch(createIncrementAction(number))
  },
  jian:(number) => {
    //通知redux执行减法
    dispatch(createDecrementAction(number))
  },
  jiaAsync:(number,time) => {
    //通知redux执行等一等再加
    dispatch(createIncrementAsyncAction(number,time))
  }
}
}
//使用connect()()创建并暴露一个Count容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

3）备注

1.容器中的store是靠props(在App.js实现)传进去的，而不是在容器组件内直接引入

App.jsx

import React, { Component } from 'react'
import Count from './containers/Count'
import store from './redux/store'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 给容器组件传递store */}
        <Count store={store}/>
      </div>
    )
  }
}

2.mapDispatchToProps，也可以是一个对象

//使用connect()()创建并暴露一个Count容器组件

export default connect(
  state => ( {count:state}), 
  //mapDispatchToProps的一般写法
  // dispatch => ({
  //   jia:number => dispatch(createIncrementAction(number)),
  //   jian:number => dispatch(createDecrementAction(number)),
  //   jiaAsync:(number,time) =>dispatch(createIncrementAsyncAction(number,time))

  //mapDispatchToProps的简写,dispatch由react-redux来完成,程序员工作中用这种方法
   {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jiaAsync:createIncrementAsyncAction

   }
 )(CountUI)

项目结构