报错'dispatch is not a function'如何修复？点击按钮触发该问题

这个报错我之前开发Redux项目时也碰到过，核心原因就是你的组件没和Redux Store正确建立连接，导致this.props.dispatch根本不存在，调用时才会抛出这个错误。下面给你几个具体的解决思路：

1. 确保组件用connect高阶函数包裹 #

Redux的connect函数负责把Store的dispatch方法注入到组件props里，如果你的组件没经过connect处理，props里自然找不到dispatch。

举个错误示例：

import React from 'react';
import ServersActions from './ServersActions';

class AddServerButton extends React.Component {
  onAddClick() {
    const { dispatch } = this.props;
    dispatch(ServersActions.startEditing());
  }

  render() {
    return <button onClick={() => this.onAddClick()}>Add Server</button>;
  }
}

// 错误：直接导出未连接Store的组件
export default AddServerButton;

改成正确写法，用connect()包裹后再导出：

import React from 'react';
import { connect } from 'react-redux'; // 引入connect
import ServersActions from './ServersActions';

class AddServerButton extends React.Component {
  onAddClick() {
    const { dispatch } = this.props;
    dispatch(ServersActions.startEditing());
  }

  render() {
    return <button onClick={() => this.onAddClick()}>Add Server</button>;
  }
}

// 即使不需要映射state到props，也要调用connect()
export default connect()(AddServerButton);

2. 更简洁的方式：直接映射action到props #

你可以通过mapDispatchToProps把action创建函数直接映射成组件的props，这样不用手动调用dispatch，Redux会自动帮你处理：

import React from 'react';
import { connect } from 'react-redux';
import { startEditing } from './ServersActions'; // 直接引入action

class AddServerButton extends React.Component {
  onAddClick() {
    this.props.startEditing(); // 直接调用，已自动绑定dispatch
  }

  render() {
    return <button onClick={() => this.onAddClick()}>Add Server</button>;
  }
}

// 把action函数映射到props
const mapDispatchToProps = {
  startEditing
};

// 第一个参数传null（不需要映射state），第二个传mapDispatchToProps
export default connect(null, mapDispatchToProps)(AddServerButton);

3. 检查根组件是否被Provider包裹 #

最后别忘了，你的整个应用必须被Redux的Provider组件包裹，否则所有子组件都无法通过connect获取到Store：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store'; // 你的Redux Store实例
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

如果以上步骤都检查过，应该就能解决这个dispatch is not a function的问题了。

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