React值react-redux的基本使用

1）深刻理解原理图

2）基本使用

1. 明确两个概念
   1）UI组件：不能使用任何redux的api，只负责页面的呈现，交互等
   2）容器组件：负责和redux通信，将结果交给UI组件
2. 如何创建一个容器组件——靠react-redux的connect函数
   connect(mapStateToProps,mapDispatchToProps)(CountUI) (UI组件)
   - mapStateToProps:映射状态，返回值是一个对象
   - mapDispatchToProps：映射操作状态的方法，返回值是一个对象
3. 备注：容器组件中的store是靠props传进去的，而不是在容器中直接引入

3）使用案例

1. 首先创建一个UI组件的容器
   src----->Containers---->Count---->index.jsx

   安装react-redux这个库

npm i react-redux

创建Count组件容器

// 引入Count的ui组件
import CountUI from "../../Components/Count";
// 引入action
import {
   createIncreamentAction,createDecreamentAction,createIncrementAsyncAction} from '../../redux/count_action'

// 引入connect用于连接UI组件与redux
import {
   connect} from 'react-redux'

/* 
    1.mapStateToProps函数返回的是一个对象
    2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
    3.mapStateToProps用于传递状态
*/ 
function mapStateToProps(state){
   
    return {
   count:state}
}
// mapDispatchToProps函数返回的对象的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value——操作状态的方法
function mapDispatchToProps(dispatch){
   
    return {
   
        jia:number=>dispatch(createIncreamentAction(number)),