未知のエラー：ディスパッチは関数ではありません

Question

私はreactjsと一緒にredux-sagaを使用しています。私はmapDispatchToPropsを使用して値を持つonClickの変更をトリガーしますが、ディスパッチが定義されていないというエラーが表示されています。サガの問題を解決する方法を教えてください。

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) 

は、これが私のインデックスサガ私のアクションここ

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

されている

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

ウォッチャー

export default function* watcher(){ 

    yield takeLatest(types.LISTS,myCallSaaga) 

} 

と私の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 
     }); 
    } 
} 

と私の減速は

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

私はエラーがあなたがmapDispatchToPropsが何のためにあるのかは、あなたの小道具、からインポートから直接アクションを呼び出すとされていないということだと思います。ローランドさんのコメントから

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

このgithub postから、私はこの

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

と

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

      /> 

のような変更は基本的に、我々はmapDispatchToPropsある私たち自身の派遣を渡す必要が行わ

：これを試してみてください