如何将数据从表单传输到Redux存储

Question

我有一个需要添加注释的表单，但是由于我只是开始研究编辑器，所以我不理解如何将发送到组件状态的表单数据传递到我的服务（以注释数组）以及需要在reducer中编写哪些内容以及如何操作才能获得作者和评论字段

我的服务组件

export default class ArticlestoreServices {
  data = [
    {
      id: 1,
      title: "most popular language in 2019",
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam harum distinctio necessitatibus eius voluptates. Voluptatem, excepturi necessitatibus. Recusandae fugiat sequi necessitatibus veritatis, hic vero molestias iure? Possimus iusto soluta facere a, nesciunt sunt reprehenderit et repellat odio. Libero, eveniet exercitationem. Nostrum quis odit unde nihil, delectus soluta aut, deserunt qui quia neque, laboriosam aliquid maxime id. Magnam, ipsa officia eum commodi molestiae iure ea natus praesentium eligendi, explicabo totam quis, voluptatem impedit itaque excepturi error est tempora magni eaque corrupti at voluptatibus? Atque autem dolorem laboriosam error alias necessitatibus omnis iste, nulla aliquam dolores mollitia optio aperiam sit delectus deleniti.",
      author: "John",
      comments: [
        {
          id: 1,
          name: "John",
          desc:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi, beatae!"
        },
        {
          id: 2,
          name: "Kein",
          desc:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ducimus?"
        }
      ]
    },
    {
      id: 2,
      title: "angularVSvue",
      description:
        "AAAALorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae eius veritatis quod iste ducimus suscipit nostrum aut alias dicta placeat rem doloribus consectetur modi fugit, dolor praesentium quidem tempore sint eveniet minima eum quasi vitae est dolores. Incidunt, maxime a commodi placeat necessitatibus nemo fuga excepturi reprehenderit culpa libero in sapiente itaque tempore explicabo quo ab? Soluta, debitis fuga necessitatibus numquam dolore officia vero praesentium nulla ducimus labore. Nihil fuga natus cum hic ad totam laudantium omnis, enim veniam ducimus nobis accusantium cupiditate earum eum, eveniet possimus amet. Voluptas culpa deleniti necessitatibus nesciunt placeat itaque perferendis consequatur, eos quam enim.",
      author: "Steve",
      comments: [
        {
          id: 1,
          name: "Daniel",
          desc:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi, cum!"
        },
        {
          id: 2,
          name: "Monro",
          desc:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, tempora."
        }
      ]
    }
  ];
  getArticles() {
    return this.data;
  }
}

我的文章组件

import React, { Component } from "react";

import { connect } from "react-redux";
import { withArticlestoreService } from "../hoc";

class ArticlePage extends Component {
  constructor(props) {
    super(props);
    this.state = { article: [], author: "", comment: "" };
  }
  componentDidMount() {
    const { articlestoreService } = this.props;
    const data = articlestoreService.getArticles();

    const currentArticle = data.find(
      article => article.id === +this.props.match.params.id
    );

    this.setState({
      article: currentArticle
    });
  }
  onChangeHandlerName(e) {
    this.setState({
      author: e.target.value
    });
  }
  onChangeHandlerComment(e) {
    this.setState({
      comment: e.target.value
    });
  }
  onSubmit(e) {
    e.preventDefault();
    console.log(this.state);
  }
  render() {
    const { title, description, author, comments } = this.state.article;
    return (
      <div>
        <h1> title:{title}</h1>
        <h2>{description}</h2>
        <h3>author:{author}</h3>
        <hr />
        <div className="comments">
          <ul>
            {comments !== undefined
              ? comments.map((item, i) => {
                  return (
                    <li className="commentary" key={item.id}>
                      <h1>{item.name}</h1>
                      <h2>{item.desc}</h2>
                    </li>
                  );
                })
              : null}
          </ul>
          <form action="submit" onSubmit={this.onSubmit.bind(this)}>
            <input
              type="text"
              placeholder="name"
              onChange={this.onChangeHandlerName.bind(this)}
            />
            <input
              type="text"
              placeholder="commentary..."
              onChange={this.onChangeHandlerComment.bind(this)}
            />
            <input type="submit" />
          </form>
        </div>
      </div>
    );
  }
}
const mapStateToProps = ({ articles }) => {
  return { articles };
};

export default withArticlestoreService()(connect(mapStateToProps)(ArticlePage));

我的减速器

const initialState = {
  articles: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "ARTICLES_LOADED":
      return {
        articles: action.payload
      };

    default:
      return state;
  }
};

export default reducer;