未捕获的错误：调度不是函数

Question

I am using redux-saga along with reactjs. I am using mapDispatchToProps to trigger onClick changes with values but I am getting above error saying that dispatch is not defined anyone please let me know how to resolve this in saga way?

import { connect } from 'react-redux';
import { updateModifiedValue } from "../actions/programActions";

import { bindActionCreators } from 'redux';

export class ProgramProfileContainer extends React.Component { 
 render() {

        return (
        <div>


             <ProgramVolumeComponent 
               updateModifiedGrowth = {(value) => updateModifiedValue(value,this.props.match.params.program_id)}

             />



            </div>
        )
    }
}
const mapStateToProps = (state) => {
    console.log("update state", state)

    return {
        programProfileData: state.programDetailReducer.programDetails,

    }
}
 const mapDispatchToProps= (dispatch) => (
  bindActionCreators({updateModifiedValue},dispatch)
 )
export default connect(
    mapStateToProps,
    mapDispatchToProps)(ProgramProfileContainer)

this is my action

export function updateModifiedValue(Value,Id){
    console.log("mval",Value)
    console.log("id",Id)
    return {
        type:types.MODIFIED_GROWTH,
        growthValue
    }
}

here is my index saga

export default function* startForman() {
  console.log("index saga")
  yield fork(watcher);
}

watcher

export default function* watcher(){

    yield takeLatest(types.LISTS,myCallSaaga)

}

and my calll saaga

export default function* myCallSaaga({Value,Id}){
    const array=[Value,Id]

     try {
        const Data = yield call(growthdetail,...array)
        yield [
            put({ type: types.MODIFIED, Detail: Data })
        ]
    } catch (error) { 
        yield put({
            type: 'FETCH_ERROR',
            error
        });
    }
}

and my reducer

export default function(state=[],action){
    switch(action.type){
        case types.PRO_LIST:
                return [...state,action.List]

        case types.MODIFIED:
    return {...state,growth:4}


        default:
        return state
    }
}

Answer 1

I think the error is that you are calling the action directly from your import and not from your props, which is what mapDispatchToProps is for. Try this:

 import programActionsCreator from "../actions/programActions";
 ...
 render() {
   const { updateModifiedValue } = this.props.actions;

   return() {
     ...
     updateModifiedGrowth = {(value) => updateModifiedValue(value, this.props.match.params.program_id)}
     ...
   }
  ...

 const mapDispatchToProps= (dispatch) => ({
   actions: bindActionCreators(programActionsCreator, dispatch)
 })

Answer 2

from rowland's comment and from this github post I made the changes like this

const mapDispatchToProps= (dispatch) => {
return  { dispatch,
    ...bindActionCreators({
    updateModifiedValue
  }, dispatch)}//bindActionCreators({updateModifiedValue},dispatch)
}

and

<ProgramVolumeComponent 
               updateModifiedGrowth = {(value) => this.props.updateModifiedValue(value,this.props.match.params.program_id)}

             />

basically we need to pass our own dispatch we are mapDispatchToProps