react-redux optimization, container components and UI components are integrated into one file, and the method in the container component is defined as an object

1: Optimization considerations

1. Container components and UI components are integrated into one file
2. No need to pass the state to the container component yourself, just give the package one
3. After using react-redux, there is no need to detect the state change in redux by yourself, the container component can automatically complete this work
4. mapDispatchToprops can also simply be written as an object
5. What are the steps for a component to "deal with" redux
   1) Define the UI component—not exposed
   2) Introduce connect to generate a container component and expose it, written as follows
   connect(
   state => ({key:value}) // Mapping state
   { key : xxxxxxAction} //method of mapping operation state
   ) (UI component)
   4) In the UI component, read and operate the state through this.props.xxxxx,

Two: Integrated component files

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.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,1000)
    }

    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;&nbsp;
                <button onClick={
    
    this.increment}>+</button>&nbsp;&nbsp;
                <button onClick={
    
    this.decrement}>-</button>&nbsp;&nbsp;
                <button onClick={
    
    this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;&nbsp;
                <button onClick={
    
    this.incrementAsync}>异步加</button>&nbsp;
            </div>
        )
    }

}

/* 
映射状态
*/
// const mapStateToProps=state=>({count:state})

/* 
映射操作状态的方法
*/
/* const mapDispatchToProps=dispatch=>({
    jia:number=>dispatch(createIncreamentAction(number)),
    jian:number=>dispatch(createDecreamentAction(number)),
    jiaAsync:(number,time)=>dispatch(createIncrementAsyncAction(number,time))
}) */

// 使用connect()()创建容器组件，让容器组件与UI组件建立联系，并暴露容器组件
export default connect(
    state=>({
    
    count:state}), 

    // mapDispatchToProps的一般写法
    /* dispatch=>({
        jia:number=>dispatch(createIncreamentAction(number)),
        jian:number=>dispatch(createDecreamentAction(number)),
        jiaAsync:(number,time)=>dispatch(createIncrementAsyncAction(number,time))
    }) */

    // mapDispatchToProps的简写（写一个对象）
    // 这里虽然表面没有dispatch，但是只要react-redux收到了action就会帮助自动分发，自动dispatch
    {
    
    
        jia:createIncreamentAction,
        jian:createDecreamentAction,
        jiaAsync:createIncrementAsyncAction
    }
    )(Count)

The optimization is mainly in the ui components and container components. Redux is still the same as before without optimization. In addition, in src----->index.js, we don’t need to use render to call render again, and react-redux automatically refreshes and updates components to render to the page