时间戳

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

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

问题描述

我真的很困惑！！

所以，我想在动作中调度另一个动作：

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))
})

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

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

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

到底是怎么回事……

标签： reactjsasynchronousreduxreact-redux

解决方案

loginUser()是“重击”。这意味着它实际上是在将一个函数传递给 real store.dispatch()，而不是一个普通的动作对象。

确保您实际上已将redux-thunk中间件包含在您的商店设置过程中 - 它教导商店接受将函数传递给store.dispatch(). 查看帖子什么是“thunk”？和Redux 中的 Thunks: The Basics来解释这意味着什么。

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

const mapDispatch = {loginUser};

推荐阅读