Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий. Но у меня нет асинхронных функций - PullRequest
Новая
       16

Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий. Но у меня нет асинхронных функций

0 голосов
/ 05 сентября 2018

Я действительно смущен !!

Итак, я отправляю еще одно действие внутри действия: 

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

Ничего сверхъестественного :) Но !! У меня ошибка

Действия должны быть простыми объектами. Используйте пользовательское промежуточное программное обеспечение для асинхронного действия.

Это действительно весело! У меня здесь нет асинхронного кода !!

Что, черт возьми, происходит ...

1 Ответ

0 голосов
/ 05 сентября 2018

loginUser() - это "гром". Это означает, что он фактически передает функцию реальному store.dispatch() и не является простым объектом действия.

Убедитесь, что вы действительно включили промежуточное программное обеспечение redux-thunk как часть процесса настройки вашего магазина - оно учит магазин принимать функции передачи в store.dispatch(). См. Сообщения Что, черт возьми, такое "гром"? и Thunks в Redux: The Basics для объяснения того, что это значит.

Также, как примечание, вы можете немного упростить этот файл. connect поддерживает «сокращенную запись объекта» для определения mapDispatch - вы можете передать объект, полный создателей действий, например: 

const mapDispatch = {loginUser};
...