一:优化注意事项
- 容器组件和UI组件整合成一个文件
- 无需自己给容器组件传递state,给包裹一个即可
- 使用了react-redux后也不用再自己检测redux中状态改变了,容器组件可以自动完成这个工作
- mapDispatchToprops也可以简单的写成一个对象
- 一个组件要和redux“打交道”要经过哪几步
1)定义好UI组件—不暴露
2)引入connect生成一个容器组件,并暴露,写法如下
connect(
state => ({key:value}) //映射状态
{ key : xxxxxxAction} //映射操作状态的方法
)(UI组件)
4) 在UI组件中通过this.props.xxxxx读取和操作状态、
二:整合后的组件文件
containers------>Count----->index.jsx
import React, {
Component } from 'react'
// 引入action
import {
createIncreamentAction,createDecreamentAction,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.