React-45：react-redux的connect用法详解

1.容器组件和ui组件整合一个文件
2.无需自己给容器组件传递store 给包裹一个 即可
import { Provider } from 'react-redux';
3.使用了react-redux 后不用自己在检测redux中状态的改变了 容器组件可以自动完成这个工作
4.mapDispatchToProps 也可以简单的写成一个对象
5.一个组件要和redux打交道要经过哪几步
1. 定义好ui组件 不导出
2.引入connect 生成一个容器组件 并且导出
3.在ui组件中通过this.props.xxxxxxx 读取和操作状态

一、UI组件和容器组件

React-Redux 将所有组件分成两大类：UI 组件和容器组件。
UI 组件：只负责 UI 的呈现，不带有任何业务逻辑，没有状态state值的使用，所以的参数是通过this.props获取。
容器组件：负责管理数据和业务逻辑，不负责 UI 的呈现，有业务逻辑，并且使用Redux提供的API。
对于上面的AppUI就是一UI组件，App就是一个容器组件。

二、connect

导入
import { connect } from 'react-redux'
使用

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

export default connect(mapStateToProps,mapDispatchToProps)(UI组件)

connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。

mapStateToProps：更新props————>作为输入源。返回一个对象，key为UI界面对应的名称，value为state处理的结果
mapDispatchToProps：更新action————>作为输出源。触发action更新reducer，进而更新state，从而驱动参数1变化，引起UI数据的变化

通过这个两参数的自动调用方式，将UI和业务逻辑分开，UI组件通过props显示，没有任何业务逻辑，容器组件负责逻辑业务。下面详解这两个参数

三、mapStateToProps

1.mapStateToProps函数返回的是一个对象；
2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
3.mapStateToProps用于传递状态

例子：

	<button onClick={this.increment}>+</button>
	<button onClick={this.decrement}>-</button>

 function mapStateToProps(state) {
   return { count: state };
 }

箭头函数简写：

 let mapStateToProps = (state) => ({ count: state });

一个参数的mapStateToProps

function mapStateToProps(state){ // UI组件中需要什么参数，对象中就写哪些参数
	return {count:state}
}

二个参数的mapStateToProps

function mapStateToProps(state,ownProps){ // UI组件中需要什么参数，对象中就写哪些参数 第二个是个空对象
	return {count:state}
}

四、mapDispatchToProps

1.mapDispatchToProps函数返回的是一个对象；
2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
3.mapDispatchToProps用于传递操作状态的方法

例子：

 function mapDispatchToProps(dispatch) {
   return {
     jia: (data) => {
       dispatch(createIncrementAction(data));
     },
     jian: (data) => {
       dispatch(createDecrementAction(data));
     },
     yibu: (data, timer) => {
       dispatch(createDecrementAsyncAction(data, timer));
     },
   };
 }

mapDispatchToProps 箭头函数简写

 let mapDispatchToProps = (dispatch) => ({
   jia: (data) => {
     dispatch(createIncrementAction(data));
   },
   jian: (data) => {
     dispatch(createDecrementAction(data));
   },
   yibu: (data, timer) => {
     dispatch(createDecrementAsyncAction(data, timer));
   },
 });

mapDispatchToProps对象方式写法

function mapDispatchToProps(dispatch){
	return {
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	}
}

这两个使用的效果一样。通过connect，store.subscribe也不需要了。通过connnect方法，最终的代码：

import React, { Component } from 'react'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/count_action'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

//定义UI组件
class Count extends Component {
	state = {carName:'奔驰c63'}
	//加法
	increment = ()=>{
		const {value} = this.selectNumber
		this.props.jia(value*1)
	}
	//减法
	decrement = ()=>{
		const {value} = this.selectNumber
		this.props.jian(value*1)
	}
	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
		this.props.jiaAsync(value*1,500)
	}

	render() {
		return (
			<div>
				<h1>当前求和为：{this.props.count}</h1>
				<button onClick={this.increment}>+</button>&nbsp;
				<button onClick={this.decrement}>-</button>&nbsp;
				<button onClick={this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({count:state}),
	{
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
	}
)(Count)

五、Provider

导入

import {Provider} from "react-redux

Provider 此处需要用 Provider 包裹 app 目的是让 app 所有的后代容器组件走能接收到store

     <div>
        <Provider store={store}>
          <Count></Count>
      {/* <Person></Person> */}
        </Provider>
      </div>