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

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

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

(一)等待整合的文件

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

javascript 复制代码

import React, {Component} from 'react';
class Count extends Component {
    // count已经交给了redux去管理了
    state = {carName:'奔驰c63'}
    // 加法
    increment=()=>{
        const {value} = this.selectNumber
        this.props.jia(value*1)
    }
    // 减法
    decrement=()=>{
        const {value} = this.selectNumber
        this.props.jian(value*1)
    }
    // 奇数再加
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        if(this.props.count %2 !== 0) {
            this.props.jia(value*1)
        }
    }
    // 异步加
    incrementAsync=()=>{
        const {value} = this.selectNumber
        this.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：

javascript 复制代码

// 引入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

javascript 复制代码

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.selectNumber
        this.props.jia(value*1)
    }
    // 减法
    decrement=()=>{
        const {value} = this.selectNumber
        this.props.jian(value*1)
    }
    // 奇数再加
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        if(this.props.count %2 !== 0) {
            this.props.jia(value*1)
        }
    }
    // 异步加
    incrementAsync=()=>{
        const {value} = this.selectNumber
        this.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读取和操作状态