карта действий создателя, чтобы реквизит реагировать на избыточность

Question

Постановка задачи: у меня есть компонент класса, в котором я пытаюсь отправить действие по нажатию кнопки.

Вот как выглядит код класса реакции:

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

Когда я нажимаю на кнопку, я получаю следующую ошибку

TypeError: this.handlerFunction is not a function

Кто-нибудь может мне помочь с тем, почему это происходит?

РЕДАКТИРОВАТЬ: я использовал connect - импортировать его в начале файла и делать connect(null, mapDispatchToProps)(Test) в конце

Answer 1

Очень сложно привести полный пример реакции-избыточности, так как нужно добавить столько файлов, чтобы включить в ваш проект избыточность. Но я упомянул здесь только базовый c пример, в котором вы должны иметь представление о редукторе действий для реализации редукса.

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