Reactjs 将动作创建者映射到道具react redux

问题陈述：我有一个类组件，在其中我试图在单击按钮时分派一个操作

以下是react类代码的外观：

const mapDispatchToProps = dispatch => {
    return {
        // function that I want to call
        handlerFunction(value){
        dispatch(
            // action creator
          addProduct(value)
        )
      }

    }
  }

class Test extends Component {

    state = {value: "Hello World"}
    render() { 
        return ( 
            <div>
                <button onClick={()=>{this.handlerFunction(this.state.value)}}>Push me</button>
            </div>
         );
    }
}

const mapDispatchToProps=dispatch=>{
返回{
//我要调用的函数
handlerFunction（值）{
派遣(
//动作创造者
添加产品（价值）
)
}
}
}
类测试扩展了组件{
状态={value:“Hello World”}
render（）{
报税表（
{this.handlerFunction（this.state.value）}>推送我
);
}
}

当我点击按钮时，我得到以下错误

TypeError:this.handler函数不是函数

有谁能帮我解释一下为什么会这样

---

编辑：我使用了connect-在文件开始时导入它，并在文件结束时执行

connect（null，mapDispatchToProps）（Test）

很难提供react-redux的完整示例，因为需要添加这么多文件才能在项目中包含redux。但我在这里只提到了一个基本示例，在这个示例中，您必须清楚地了解action reducer以实现redux

import React, {useEffect, useRef, useState} from 'react';
import {connect, useSelector} from 'react-redux';
import * as ServiceActions from './actions/service.actions';
import withReducer from 'app/store/withReducer';
import reducer from './reducers/service.reducer'
import {bindActionCreators} from "redux";

function TestDispatch(props) {
    const {
        handlerFunction
    } = props;

    return (
        <div>
            <button onClick={() => {
                handlerFunction('Khabir');
            }}>Push me
            </button>
        </div>
    )
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
            handlerFunction: ServiceActions.addProduct()
        },
        dispatch);
}

export default connect(null, mapDispatchToProps)(withReducer('service', reducer)(TestDispatch));

import React，{useffect，useRef，useState}来自'React'；
从“react-redux”导入{connect，useSelector}；
从“./actions/service.actions”导入*作为ServiceActions；
从“app/store/withReducer”导入withReducer；
从“./reducers/service.reducer”导入reducer
从“redux”导入{bindActionCreators}；
功能测试调度（props）{
常数{
handlerFunction
}=道具；
返回(
{
handlerFunction（'Khabir'）；
}}>推我
)
}
功能图DispatchToprops（调度）{
返回bindActionCreators({
handlerFunction:ServiceActions.addProduct（）
},
派遣）；
}
导出默认连接（null，mapDispatchToProps）（带reducer（“服务”，reducer）（TestDispatch））；

您需要使用

connect

将测试组件连接到mapDispatchToProps：当然，我使用了connect。我把它抽象出来，这样问题就集中在我的问题上了。我想我应该在问题中提到这一点