React Redux开发笔记APP编辑功能报'dispatch is not a function'求助

你遇到的dispatch is not a function报错以及编辑功能异常，由以下几处代码错误导致，对应修复方案如下： #

核心错误：Note组件connect参数顺序颠倒 #

react-redux的connect函数入参顺序固定为(mapStateToProps, mapDispatchToProps)，你的代码中将两个参数位置写反，导致dispatch没有正确注入到组件props中，这是触发报错的直接原因。
修复方案：修改Note组件末尾的导出代码

// 原错误写法
// export default connect(mapDispatchToProps, mapStateToProps)(Note)
// 修正后
export default connect(mapStateToProps, mapDispatchToProps)(Note)

次要错误1：editNoteAction入参不匹配 #

你定义的action要求接收(text, id)两个位置参数，但实际调用时要么传单个字符串、要么传单个对象，导致payload取值异常。
修复方案：调整action定义适配你的调用习惯

// 原定义
// export const editNoteAction = (text, id) => ({
// 修正后
export const editNoteAction = ({text, id}) => ({
  type: EDIT_NOTE,
  payload: {
    id,
    text,
  },
})

次要错误2：EDIT_NOTE reducer逻辑完全错误 #

你当前的reducer在匹配到对应id的笔记时，错误返回了整个state结构，还重复往notes数组新增元素，会导致state结构彻底混乱。
修复方案：替换EDIT_NOTE分支逻辑

case EDIT_NOTE: {
  const editedNote = {
    text: payload.text,
    id: payload.id,
    date: new Date().toLocaleDateString(),
  }
  return {
    ...state,
    notes: state.notes.map((note) =>
      note.id === payload.id ? editedNote : note
    ),
  }
}

次要错误3：重复绑定编辑方法导致冲突 #

Note组件既从父组件NoteList接收了handleEditNote，又自己通过connect绑定了editNoteAction，容易出现调用冲突。建议直接删掉NoteList里editNoteAction的传递和对应mapDispatch配置，只用Note自己绑定的方法即可。
另外可以删掉handleToggleEdit里的editNoteAction(text)调用，只需要在保存笔记的onNoteSave方法里调用action即可。

内容的提问来源于stack exchange，提问作者Anton