Question

我正在使用redux-saga和reactjs。我正在使用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

来自rowland的评论和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

未捕获的错误：dispatch不是一个函数

2 个答案: