初学redux，为什么第一段的代码中的dispatch是能用，第二段代码中的dispatch是未定义的

Question

第一段

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

第二段

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);

Answer 1

在类中dispatch要从this.props拿到
同理，你在handleClickLi直接形参解构是拿不到dispatch的
第二段代码改为

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>
        )
    }

Answer 2

onClick={() => this.handleClickLi(this.props.dispatch(beginToLogin('Coffee 500gm', 1, 250)))}

handleClickLi = () => {
    console.log('dispatch = ', this.props.dispatch)
}

Answer 3

首先弄清楚几个问题

• 函数式组件
• Class组件

当你使用函数作为组件的connect()(funcComponent)的时候

functionComponent = (props) => <div></div>

其实接受的是一个属性，props内有dispatch函数所以是对的

class组件呢，是这样

connect()(classComponent)

这个时候，的确是传入这个参数，但是那里获取呢？我们知道classComponent上有两个属性props和state,一个代表传入属性，一个代表组件状态。
这个时候要得到传入属性必须是props.dispatch才是OK的。

最后connect的hoc应该是对两种不同组件做了差异化处理，而不会直接挂载上去的