React Redux页面级数据加载时dispatch is not a function错误解决

你碰到的这个错误其实很好理解——当你给connect传了一个空的mapDispatchToProps函数时，Redux不会把dispatch作为props传递给你的组件，所以你在createHandlers里尝试调用this.props.dispatch的时候，自然会得到dispatch is not a function的报错。

下面给你两种符合Redux最佳实践的解决方式，选一种适合你的就行：

方法一：用bindActionCreators直接绑定Action到Props（推荐） #

这是Redux官方最推荐的写法，不用自己手动写createHandlers，直接把需要的Action映射成组件的props，调用起来更简洁：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { PropTypes } from 'prop-types';
import { bindActionCreators } from 'redux';
import * as myActions from '../../actions/myActions';
import { MuiThemeProvider } from 'material-ui/styles';

class MyPage extends Component {
  // 推荐在componentDidMount里发起数据加载，这是React官方指定的异步操作时机
  componentDidMount() {
    // 直接调用props里已绑定好的doStuff
    this.props.doStuff();
  }

  render() {
    return (
      <MuiThemeProvider>
        <div>...</div>
      </MuiThemeProvider>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    // 这里返回你需要从Redux Store中获取的状态，比如：
    // myStuff: state.myStuff
  };
}

function mapDispatchToProps(dispatch) {
  // 把myActions里的所有方法都绑定到dispatch，直接作为props传给组件
  return bindActionCreators(myActions, dispatch);
}

MyPage.propTypes = {
  doStuff: PropTypes.func.isRequired,
  // 其他你需要的props类型定义
}

export default connect(mapStateToProps, mapDispatchToProps)(MyPage);

方法二：手动在mapDispatchToProps中传入dispatch（如果你坚持用自己的createHandlers） #

如果你不想放弃自己写的createHandlers，那只要修改mapDispatchToProps，把dispatch作为props返回给组件就行：

// 保留你原来的createHandlers和组件代码，只修改mapDispatchToProps
function mapDispatchToProps(dispatch) {
  return {
    dispatch, // 把dispatch传给组件props
    // 也可以同时绑定其他Action，按需选择
    // ...bindActionCreators(myActions, dispatch)
  };
}

这样this.props.dispatch就会存在，你取消注释this.handlers.doStuff()后就不会报错了。不过还是建议用第一种方法，因为它更符合Redux的设计理念，减少冗余代码。

另外提醒一句：尽量不要在constructor里发起数据加载，放在componentDidMount里更稳妥——此时组件已经挂载到DOM，状态更新能正常触发重渲染，避免一些奇怪的生命周期问题。

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