For beginners, why the dispatch in the first paragraph of the code is available and the dispatch in the second paragraph is undefined

first paragraph

import React from "react"
import { connect } from "react-redux"
import { addToCart } from "../actions/cart-actions"

let AddTodo = ({ dispatch }) => {
    let input = "";
    
    return (
        <div>
            <form
                onSubmit={e => {
                    e.preventDefault()
                    if (!input.value.trim()) {
                        return
                    }
                    dispatch(addToCart(input.value, 1, 250))
                    input.value = ""
                }}
            >
                <input
                    ref={node => {
                        console.log(" value ==", node )
                        input = node
                    }}
                />
                <button type="submit">
                    
                </button>
            </form>
        </div>
    )
}
AddTodo = connect()(AddTodo)

export default AddTodo

second paragraph

import React from "react";
import { connect } from "react-redux"
import "./assets/styles/index.less";
import Landscape from "./assets/images/landscape.png";
import Logo from "./assets/images/logo.png";
import Resize from  "PATH_SRC_UTILS/res";
import HttpUtil from "PATH_SRC_UTILS/httpUtil";
import Helper from "PATH_SRC_UTILS/helper";
import StorageApi from "PATH_SRC_UTILS/storageApi";
import FetchServer from "PATH_SRC_UTILS/fetchServer";
import { beginToLogin } from "../actions/login-actions"


class Login extends React.Component {

    constructor() {
        super();
        this.state = {
            current: 0
        }

        this.handleClickLi = this.handleClickLi.bind(this);//

    }

    handleClickLi = ({dispatch}) => {

        console.log("dispatch = ", dispatch)

    }

    render() {

        const _self = this;
        return (
            <div className={"login_div"}>
                <div
                    className={"login_button"}
                    onClick={() => this.handleClickLi(dispatch(beginToLogin("Coffee 500gm", 1, 250)))}
                >
                    
                </div>
            </div>
        )
    }
}

export default connect()(Login);

Apr.11,2021

in the class dispatch to get
from this.props , you can't get dispatch 's
second code to

if you directly deconstruct it in handleClickLi.
render() {
        const { dispatch } = this.props;
        const _self = this;
        return (
            <div className={'login_div'}>
                <div
                    className={'login_button'}
                    onClick={() => this.handleClickLi(dispatch(beginToLogin('Coffee 500gm', 1, 250)))}
                >
                    
                </div>
            </div>
        )
    }


connect()(classComponent)

at this time, it is true that this parameter is passed in, but where can I get it? We know that there are two properties props and state on classComponent, one representing the incoming attribute and the other representing the component state.
at this point, to get the incoming property, it must be props.dispatch before it is OK.

in the end, the hoc of connect should differentiate the two different components and not mount them directly

Menu