React Redux : saving and displaying data - reactjs

Question

I am trying to make a React app where I have a form and when submitted I want to show the data on the screen. I am also using redux. I am new to all that so I can't figure out how to save the data to the store and then display it.
If someone can tell me what I need to do. I think I should save the data from the form, pass it to the store but don't know how.
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

You are on the right track. you can locally save the form inputs data in a state Object inside the AddAnimal component such that it won't update redux state on every key change.
And on click of onSubmit you can dispatch an action (addAnimal which can be accessed by this.props.addAnimal) with form data as an argument. On dispatching it will call your reducer and save the data in the redux state.
As your AddAnimal component is listening on animals redux's state change. On updating redux state you can fetch newly updated data via props. (this.props.animals). But this will be only required if you want to show added data on UI inside the AddAnimal component.

Answer 2

Unnecessary mapStateToDispatch
in the component fix export to this:
export default connect(mapStateToProps, actions)(AddAnimal);
and you do not need mapStateToDispatch
and try to active the action with: this.props.addAnimal();