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

你在正确的轨道上。您可以将表单输入数据本地保存在 AddAnimal 组件内的状态对象中，这样它就不会在每次键更改时更新 redux 状态。

点击onSubmit，您可以发送一个动作（addAnimal，可以通过this.props.addAnimal访问），表单数据作为参数。在调度时它会调用你的 reducer 并将数据保存在 redux 状态。

因为您的 AddAnimal 组件正在监听动物 redux 的状态变化。在更新 redux 状态时，您可以通过 props 获取新更新的数据。 （this.props.animals）。但只有当您想在 AddAnimal 组件内的 UI 上显示添加的数据时，才需要这样做。

Answer 2

不必要的 mapStateToDispatch

在组件中修复导出到这个：

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

你不需要mapStateToDispatch

并尝试通过以下方式激活操作：this.props.addAnimal();