title: React Redux : saving and displaying data
body: <p>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 <strong>how to save the data to the store and then display it</strong>.  </p>
  
  <p>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.</p>
  
  <pre><code>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 =&gt; {
      console.log(e);
      e.preventDefault();
    };
  
    render() {
      return (
        &lt;form onSubmit={this.onSubmit}&gt;
          &lt;input type="text" name="name" /&gt;
          &lt;br /&gt;
  
          &lt;input type="text" name="animal" /&gt;
          &lt;br /&gt;
          &lt;input type="submit" value="submit" className="btn" /&gt;
        &lt;/form&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      animals: state.animals
    };
  };
  
  const mapStateToDispatch = dispatch =&gt; {
    return bindActionCreators(
      {
        addAnimal: actions.addAnimal
      },
      dispatch
    );
  };
  
  export default connect(
    mapStateToProps,
    mapStateToDispatch
  )(AddAnimal);
  </code></pre>