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

Question

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

Это ошибка, и эта функция указывает

this.props.registerUser (newUser);

см.следующий фрагмент кода!

redux-thunk используется для ссылки на простой js-объект, но не работает

Это мой файл создателя действий:

import { GET_ERRORS } from "./types";
import axios from "axios";

// Register User
export const registerUser = userData => dispatch => {
axios
.post("/api/users/register", userData)
.then(res => console.log(res))
.catch(err =>
  dispatch({
    type: GET_ERRORS,
    payload: err.response.data
  })
 );
};

Это моя реакциястраница регистрации:

import React, { Component } from "react";
import PropTypes from "prop-types";
// import { withRouter } from 'react-router-dom';
import classnames from "classnames";
import { connect } from "react-redux";
import { registerUser } from "../../actions/authActions";

class Register extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: "",
      password: "",
      password2: "",
      errors: {}
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }

  onChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
  onSubmit(event) {
    event.preventDefault();
    const newUser = {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password,
      confirm_password: this.state.password2
    };
    this.props.registerUser(newUser);
  }
  render() {
    const { errors } = this.state;

    return (
      <div className="register">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">Sign Up</h1>
              <p className="lead text-center">
                Create your SocioStalker account
              </p>
              <form noValidate onSubmit={this.onSubmit}>
                <div className="form-group">
                  <input
                    type="text"
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.name
                    })}
                    placeholder="Name"
                    name="name"
                    value={this.state.name}
                    onChange={this.onChange}
                  />
                  <div className="invalid-feedback">{errors.name}</div>
                </div>
                <div className="form-group">
                  <input
                    type="email"
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.email
                    })}
                    placeholder="Email Address"
                    name="email"
                    value={this.state.email}
                    onChange={this.onChange}
                  />
                  <div className="invalid-feedback">{errors.email}</div>

                  <small className="form-text text-muted">
                    This site uses Gravatar so if you want a profile image, use
                    a Gravatar email
                  </small>
                </div>
                <div className="form-group">
                  <input
                    type="password"
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.password
                    })}
                    placeholder="Password"
                    name="password"
                    value={this.state.password}
                    onChange={this.onChange}
                  />
                  <div className="invalid-feedback">{errors.password}</div>
                </div>
                <div className="form-group">
                  <input
                    type="password"
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.confirm_password
                    })}
                    placeholder="Confirm Password"
                    name="password2"
                    value={this.state.password2}
                    onChange={this.onChange}
                  />
                  <div className="invalid-feedback">
                    {errors.confirm_password}
                  </div>
                </div>
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Register.propTypes = {
  registerUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

export default connect(
  mapStateToProps,
  { registerUser }
)(Register);

Файл конфигурации магазина:

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
import { composeWithDevTools } from "redux-devtools-extension";

const initialState = {};

const middleware = [thunk];
const store = createStore(
  rootReducer,
  initialState,
  compose(
    composeWithDevTools(),
    applyMiddleware(...middleware)
  )
);

export default store;

Answer 1

Неправильная логика настройки вашего магазина.У вас есть это:

compose(
    composeWithDevTools(),
    applyMiddleware(...middleware)
)

Вместо этого оно должно быть:

composeWithDevTools(
    applyMiddleware(...middleware)
)

Пожалуйста, посмотрите страницу документации Redux на "Настройка вашего магазина" для примерово том, как правильно настроить промежуточное ПО и расширение DevTools.

Я также рекомендую вам попробовать наш новый redux-starter-kit пакет .Он включает в себя configureStore функцию , которая делает все это за вас автоматически.

Вот как вы можете упростить файл запуска, используя configureStore:

import {configureStore} from "redux-starter-kit";
import rootReducer from "./reducers";

const store = configureStore({
    reducer : rootReducer,
});