尝试使用 Redux Form 将对象插入 Redux 存储时出错

Question

我是 React 的新手，我正在与以下 Redux-Form、React Routing 协作创建 React CRUD 应用程序, 语义 UI 和 Redux Store 技术

所以我能够完成反应路由部分，现在我坚持将表单对象添加到 redux 存储。

这是我的文件夹结构

这是我的AddStudents.Js文件

import React, { Component } from "react";
import "../App.css";
import { Field, reduxForm } from "redux-form";
import { allActions } from "../Actions/AllActions";

export class AddStudents extends React.Component {
  renderError({ error, touched }) {
    if (touched && error) {
      return (
        <div className="ui error message">
          <div className="header">{error}</div>
        </div>
      );
    }
  }

  handleChange(e) {
    this.setState({ ...this.state, [e.target.name]: e.target.value });
  }

  constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      lastName: ""
    };
  }

  renderInput = ({ label, input, meta }) => {
    console.log(meta);
    const className = `field ${meta.error && meta.touched ? "error" : " "}`;
    return (
      <div className={className}>
        <label>{label}</label>
        <input {...input} autoComplete="off"></input>
        {this.renderError(meta)}
      </div>
    );
  };

  onSubmit(student) {
    console.log("form was submitted!");
    console.log(student);
    const { dispatch } = this.props;
    dispatch(allActions.addStudents(this.state));
    this.setState({
      firstName: "",
      lastName: ""
    });
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="ui container">
        <span></span>
        <h2>Add Student</h2>
        <form
          onSubmit={handleSubmit(this.onSubmit.bind(this))}
          className="ui form error"
        >
          <Field
            name="firstName"
            component={this.renderInput}
            label="First Name"
            value={this.state.firstName}
            onChange={e => this.handleChange(e)}
          ></Field>
          <Field
            name="lastName"
            component={this.renderInput}
            label="Last Name"
            value={this.state.lastName}
            onChange={e => this.handleChange(e)}
          ></Field>
          <button className="ui button primary">Submit</button>
        </form>
      </div>
    );
  }
}

const validate = formValues => {
  const errors = {};
  if (!formValues.firstName) {
    errors.firstName = "Enter your First Name ...";
  }
  if (!formValues.lastName) {
    errors.lastName = "Enter your Last Name ...";
  }

  return errors;
};

function mapStateToProps(state) {
  const { student } = state.addStudents;
  return {
    student
  };
}

export default reduxForm({
  form: "OurForm",
  validate,
  mapStateToProps
})(AddStudents);

这是AllActions.js

import { allConstants } from "../Constants/AllConstants.js";
import { allServices } from "../Services/AllServices.js";

export const allActions = {
  addStudents,
  viewStudents,
  editStudents
};

function addStudents(student) {
  return dispatch => {
    dispatch(request(student));
    allServices.addStudents(student);
    dispatch(success(student));
  };
  function request(student) {
    return { type: allConstants.ADD_STUDENT_REQUEST, student };
  }
  function success(student) {
    return { type: allConstants.ADD_STUDENT_SUCCESS, student };
  }
  function failure(error) {
    return { type: allConstants.ADD_STUDENT_FAILURE, error };
  }
}

function viewStudents() {
  return dispatch => {
    dispatch(request());
    var students = allServices.viewStudents();
    dispatch(success(students));
  };
  function request() {
    return { type: allConstants.VIEW_ALL_STUDENTS_REQUEST };
  }
  function success(students) {
    return { type: allConstants.VIEW_ALL_STUDENTS_SUCCESS, students };
  }
  function failure(error) {
    return { type: allConstants.VIEW_ALL_STUDENTS_FAILURE, error };
  }
}

function editStudents(student) {
  return dispatch => {
    dispatch(request(student));
    allServices.editStudents(student);
    dispatch(success(student));
  };
  function request(student) {
    return { type: allConstants.EDIT_STUDENT_REQUEST, student };
  }
  function success(student) {
    return { type: allConstants.EDIT_STUDENT_SUCCESS, student };
  }
  function failure(error) {
    return { type: allConstants.EDIT_STUDENT_FAILURE, error };
  }
}

在这里，当我填写表单并单击“提交”按钮后，在控制台日志中我可以看到对象值绑定，但它没有推送到存储，我收到以下错误

Actions must be plain objects. Use custom middleware for async actions.

感谢是否可以帮助解决此问题或推荐合适的示例。

Answer 1

request(student) 是一个动作创建器，returns 将函数作为动作。这只有在您使用 thunk 中间件时才有可能。您将必须安装软件包并配置存储如下

EDIT

尝试在你的商店中做一些这样的改变（确保你安装了 redux-thunk 和 redux-logger）

import { createStore, applyMiddleware, compose } from "redux";
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";
import rootReducer from "../Reducers";

const loggerMiddleware = createLogger();

const Compose = compose(
  applyMiddleware(thunkMiddleware, loggerMiddleware),
  window.__REDUX_DEVTOOLS_EXTENSION__()
);

const store = createStore(rootReducer, Compose);

export default store;

在你的index.js中添加这个

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./Components/App";
import Store from "./Helper/Store";

ReactDOM.render(
  <Provider store={Store}>
    <App></App>
  </Provider>,
  document.querySelector("#root")
);

在您在 github link 中提供的代码中，即使您创建了商店（带有 thunk 中间件），您也没有使用它。

尝试使用 Redux Form 将对象插入 Redux 存储时出错

Getting error once try to insert an object to Redux store with Redux Form

reactjs

react-router

redux

redux-form