React Redux: сохранение и отображение данных

Question

Я пытаюсь создать приложение React, в котором у меня есть форма, и при отправке я хочу показать данные на экране. Я также использую Redux. Я новичок во всем этом, поэтому я не могу понять , как сохранить данные в хранилище и затем отобразить их .

Если кто-то может сказать мне, что мне нужно сделать. Я думаю, что я должен сохранить данные из формы, передать их в магазин, но не знаю как.

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as actions from "../redux/actions";

export class AddAnimal extends Component {
  state = {
    animal: {
      name: "",
      animal: ""
    }
  };

  onSubmit = e => {
    console.log(e);
    e.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" name="name" />
        <br />

        <input type="text" name="animal" />
        <br />
        <input type="submit" value="submit" className="btn" />
      </form>
    );
  }
}

const mapStateToProps = state => {
  return {
    animals: state.animals
  };
};

const mapStateToDispatch = dispatch => {
  return bindActionCreators(
    {
      addAnimal: actions.addAnimal
    },
    dispatch
  );
};

export default connect(
  mapStateToProps,
  mapStateToDispatch
)(AddAnimal);

Answer 1

Ненужный mapStateToDispatch

в экспорте исправления компонента для этого:

export default connect(mapStateToProps, actions)(AddAnimal);

и вам не нужно mapStateToDispatch

и попробуйте активировать действие с помощью: this.props.addAnimal();

Answer 2

Вы на правильном пути. вы можете локально сохранить входные данные формы в объекте State внутри компонента AddAnimal, чтобы он не обновлял состояние приставки при каждом изменении ключа.

А при нажатии onSubmit вы можете отправить действие (addAnimal, который может быть доступен this.props.addAnimal) с данными формы в качестве аргумента. При отправке он вызовет ваш редуктор и сохранит данные в состоянии избыточности.

Поскольку ваш компонент AddAnimal прослушивает изменение состояния животных в избыточности. При обновлении избыточного состояния вы можете получить недавно обновленные данные через реквизит. (this.props.animals). Но это потребуется, только если вы хотите отобразить добавленные данные в пользовательском интерфейсе внутри компонента AddAnimal.