.dispatch is not a function

component 1:

const mapDispatchToProps = (dispatch) => {
  return {
    currency: (data) => dispatch(currency(data)),
  }
}
const mapStateToProps = (state) => {
  return ({
      changeContent: state.changeContent
    }
  )
}


handleClick = (e, special) => {
    const { changeContent } = this.props;
    changeContent({type:"CHANGE",item:e.key})

};
export default connect((state, ownProps) => {
    return {
      menuList: state.menuList,
      userInfor: state.userInfor,
      menuKeys: state.menuKey,
      language: state.language,
    };
  }, mapStateToProps,
  mapDispatchToProps)(Container);

component 2:

//CommonList

render (){
    return (
        <div>{this.props.changeContent}</div>
)}
const changeContent =(state)=>({
    changeContent:state.changeContent
})
export default connect(changeContent)( Form.create({})(CommonList))

reducer:

const changeContent =  (state = [], action) =>{
  switch (action.type){
    case "CHANGE" :
      return ([...state, action.item])
    default:
      return state
  }
}
export default changeContent

if you run it, you will get an error, changeContent is not a function

clipboard.png

Feb.26,2021

there is really no this.props.changeContent in your Container component. Either you can pass it to < Container changeContent= {.} / > through external use, or you can use it in mapDispatchToProps = (dispatch) = > ({changeContent: function})


you don't use it correctly. ChangeContent is a reducer,. If you want to execute an action, use
this.props.dispatch ({type:'CHANG',item}) directly, and your
const mapDispatchToProps = (dispatch) = > {
return dispatch
}
will not prompt dispatch is not a function

.
Menu