错误：操作必须是普通对象。使用自定义中间件进行异步操作。但我没有异步功能

Question

我真的很困惑！

所以，我想在行动中发出另一个动作：

import * as actionsTypes from '../constants/actionsTypes';

export const loginUserSuccess = userName => ({
  type: actionsTypes.LOGIN_SUCCESS,
  userName
});

export const loginUserFailed = () => ({
  type: actionsTypes.LOGIN_FAILED
});

export const loginUser = userName => dispatch => {
  dispatch(loginUserSuccess(userName));
}

在loginUser操作中，我将创建一个逻辑来选择要调度的操作。现在没关系

这是loginUser操作的用法

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { loginUser } from '../../actions';

class loginUserForm extends Component {
  state = {
    userName: ''
  }

  inputChangeHandler = event => {
    this.setState({ userName: event.target.value })
  }

  loginUserHandler = event => {
    event.preventDefault();
    this.props.loginUser(this.state.userName);
  }

  render() {
    return (
      <form className="login-user" onSubmit={event => this.loginUserHandler(event)}>
        <input type="text" onChange={event => this.inputChangeHandler(event)} />
        <input type="submit" value="Login" disabled={this.state.userName.length === 0} />
      </form>
    )
  }
};

const mapDispatchToProps = dispatch => ({
  loginUser: userName => dispatch(loginUser(userName))
})

没什么超自然的:)但是!!我有一个错误

动作必须是普通对象。使用自定义中间件进行异步操作。

这真的很有趣！我这里没有异步代码!!

到底发生了什么......

Answer 1

loginUser()是一个“thunk”。这意味着它实际上是将一个函数传递给真正的store.dispatch()，而不是一个简单的动作对象。

确保您实际上已将redux-thunk中间件作为商店设置过程的一部分 - 教会商店接受传递函数到store.dispatch()。有关这意味着什么的解释，请参阅帖子What the heck is a "thunk"?和Thunks in Redux: The Basics。

另外，作为旁注，您可以稍微简化该文件。 connect支持用于定义mapDispatch的“对象简写” - 您可以直接传递一个充满动作创建者的对象，例如：

const mapDispatch = {loginUser};