Redux新手求助：函数内调用dispatch提示'dispatch is not defined no-undef'

嘿，我刚看完你的问题，这个错误其实是Redux新手常遇到的，别担心，咱们一步步来解决～

首先，控制台提示dispatch is not defined，核心原因是你的组件没有拿到Redux的dispatch方法。因为在React-Redux中，组件想要和Redux Store交互，必须通过connect高阶组件把dispatch或者绑定好的action方法注入到组件的props里。

下面给你两种最常用的解决方式，你可以选适合自己的：

方式一：用mapDispatchToProps绑定action到props #

这种方式更推荐，因为它能让你直接通过props调用action，不用手动写dispatch，代码更简洁。

1. 先定义mapDispatchToProps函数，把你的action creators包装成会自动dispatch的方法：

// 在组件文件里添加这个函数
const mapDispatchToProps = (dispatch) => {
  return {
    // 把getYear action绑定成props方法，调用时自动dispatch
    getYear: () => dispatch(getYear()),
    // 同理处理requestYear
    requestYear: () => dispatch(requestYear())
  }
}

2. 然后修改connect的导出，把这个函数传进去：

// 原来的connect可能只传了mapStateToProps，现在加上第二个参数
export default connect(mapStateToProps, mapDispatchToProps)(SigninForm);

3. 之后在组件的方法里，直接调用props里的方法就行，比如你的getYear方法可以改成：

getYear(){
  // 调用props里绑定好的getYear，自动dispatch action
  this.props.getYear();
  // 然后处理this.props.year的逻辑...
  return this.props.year.map( (year, index) => {
    // 你的渲染逻辑
  })
}

方式二：直接使用this.props.dispatch #

如果你不想写mapDispatchToProps，也可以直接用connect默认注入的dispatch props，前提是你没有传入第二个参数给connect：

// 确保connect的第二个参数留空或者不传
export default connect(mapStateToProps)(SigninForm);

然后在组件方法里直接调用：

someMethod(){
  // 直接用this.props.dispatch来触发action
  this.props.dispatch(requestYear());
}

额外要注意的点 #

• 别忘了用connect包裹你的组件并导出！如果只是导入了connect但没用来包裹组件，组件根本拿不到Redux的任何props，这是新手最容易忘的一步。
• 如果你的组件需要从Store里取year数据，还要正确定义mapStateToProps，把Store里的year映射到组件props：

const mapStateToProps = (state) => {
  return {
    year: state.year // 这里要对应你的Reducer里的state结构，比如如果你的year在state.yearData里，就改成state.yearData
  }
}

这样改完之后，应该就能解决dispatch is not defined的问题啦～

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