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()是“沉重的”。这意味着它实际上是在向真实的store.dispatch()传递函数，而不是简单的动作对象。

确保在商店设置过程中实际上包含了redux-thunk中间件-教导商店接受传递给store.dispatch()的函数。有关其含义的说明，请参见帖子What the heck is a "thunk"?和Thunks in Redux: The Basics。

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

const mapDispatch = {loginUser};

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

1 个答案: