Redux报错‘Actions must be plain objects’，疑mapDispatchToProps使用有误

我一眼就看出问题啦！你在resetLoginFailState里犯了个很常见的小疏忽——你没有调用你的action creator函数。

咱们拆解下原因：

• 在resetLoginForm里，你调用了reset("login")，这会让reset这个action creator返回一个标准的plain object action，dispatch能正常处理它。
• 但在resetLoginFailState里，你直接把resetLoginFailed这个函数本身传给了dispatch，而没有执行它（也就是没加()）。这就导致dispatch收到的是一个函数，而非Redux要求的plain object，所以才会抛出那个错误。

修正后的代码 #

function mapDispatchToProps(dispatch) {
  return {
    resetLoginForm() {
      dispatch(reset("login"))
    },
    resetLoginFailState() {
      // 这里要调用action creator，让它返回plain object action
      dispatch(resetLoginFailed()); 
    }
  }
}

额外小技巧：简化mapDispatchToProps #

其实Redux提供了更简洁的写法，你可以直接把action creators作为对象传给connect，不用手动写mapDispatchToProps：

import { connect } from 'react-redux';
import { reset, resetLoginFailed } from './your-actions-file';

// 直接在connect的第二个参数里传对象，Redux会自动帮你绑定dispatch
export default connect(null, { 
  resetLoginForm: () => reset("login"), 
  resetLoginFailState: resetLoginFailed 
})(YourComponent);

如果你的action creator不需要额外参数，还能更精简：

export default connect(null, { resetLoginFailed })(YourComponent);

这样写不仅更简洁，还能避免这类忘记调用action creator的小失误~

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