尚硅谷-react教程-求和案例-优化3-整合UI组件和容器组件-总结优化-笔记

继续优化，尚硅谷-react教程-求和案例-优化2-Provider组件的使用-笔记-CSDN博客

删除components这个文件夹，整合components/Count/ndex.jsx和containers/Count/index.jsx

(一)等待整合的文件 

（1）原来的components/Count/ndex.jsx：

import React, {Component} from 'react';
class Count extends Component {// count已经交给了redux去管理了state = {carName:'奔驰c63'}// 加法increment=()=>{const {value} = this.selectNumberthis.props.jia(value*1)}// 减法decrement=()=>{const {value} = this.selectNumberthis.props.jian(value*1)}// 奇数再加incrementIfOdd=()=>{const {value} = this.selectNumberif(this.props.count %2 !== 0) {this.props.jia(value*1)}}// 异步加incrementAsync=()=>{const {value} = this.selectNumberthis.props.jiaAsync(value*1,500)}render() {return (<div><h1>当前求和为：{this.props.count}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={this.increment}>+</button>&nbsp;<button onClick={this.decrement}>-</button>&nbsp;<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;<button onClick={this.incrementAsync}>异步加</button>&nbsp;</div>);}
}export default Count;

（2）原来的containers/Count/index.jsx：

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入action
import {createDecrementAction,createIncrementAction,createIncrementAsyncAction
} from '../../redux/count_action'// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'// 版本四
// 使用connect()()创建并暴露一个Count的容器组件
export default connect(state =>({count:state}),// mapDispatchToProps的精简写法{jia:createIncrementAction,jian:createDecrementAction,jiaAsync:createIncrementAsyncAction,}
)(CountUI)

（二）整合成一个文件，containers/Count/index.jsx

import React, {Component} from 'react';
// 引入action
import {createDecrementAction,createIncrementAction,createIncrementAsyncAction
} from '../../redux/count_action'// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'// 定义UI组件
class Count extends Component {// count已经交给了redux去管理了state = {carName:'奔驰c63'}// 加法increment=()=>{const {value} = this.selectNumberthis.props.jia(value*1)}// 减法decrement=()=>{const {value} = this.selectNumberthis.props.jian(value*1)}// 奇数再加incrementIfOdd=()=>{const {value} = this.selectNumberif(this.props.count %2 !== 0) {this.props.jia(value*1)}}// 异步加incrementAsync=()=>{const {value} = this.selectNumberthis.props.jiaAsync(value*1,500)}render() {return (<div><h1>当前求和为：{this.props.count}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={this.increment}>+</button>&nbsp;<button onClick={this.decrement}>-</button>&nbsp;<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;<button onClick={this.incrementAsync}>异步加</button>&nbsp;</div>);}
}// 使用connect()()创建并暴露一个Count的容器组件
export default connect(state =>({count:state}),// mapDispatchToProps的精简写法{jia:createIncrementAction,jian:createDecrementAction,jiaAsync:createIncrementAsyncAction,}
)(Count)

总结：

## 5.求和案例_react-redux优化
    (1).容器组件和UI组件整合成一个文件
    (2).无需自己给容器组件传递store,给<App/>包裹一个<Provider store={store}>即可
    (3).使用了react-redux后也不用再自己监测redux中状态的改变了，容器组件可以自动完成这个工作
    (4).mapDispatchToProps也可以简单的写成一个对象
    (5).一个组件要和redux"打交道"要经过哪几步？
        (1).定义好UI组件----不暴露
        (2).引入connect生成一个容器组件，并暴露，写法如下：
            connect(
                state => ({key:value}) // 映射状态
                {key: xxxxAction} // 映射操作状态的方法
            )(UI组件)
        (3).在UI组件中通过this,props.xxxxxxxx读取和操作状态