как перенести данные из формы в избыточное хранилище

Question

У меня есть форма, в которую нужно добавлять комментарии, но так как я только начал изучать редакторы, я не понимаю, как данные формы, которые я отправляю в состояние компонента, передаются моему сервису (в массиве комментариев) и что нужно написать в редукторе для этого и действия, чтобы получить поля автора и комментариев

Мой сервисный компонент

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;