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>
<button onClick={this.decrement}>-</button>
<button onClick={this.incrementAsync}>异步加</button>
</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>