title: How to make a post request using react redux?
body: <p>I have created a form with email, firstname, lastname details. Now I want to make a POST request to <code>localhost:5000/api/users</code> and want to store it in mongo database. How can I make use of redux ? I have implemented it using on reactjs only how can I make use of redux ? Note: I am using redux thunk.</p>
  
  <p>Code:</p>
  
  <p>login.js:</p>
  
  <pre><code>import React, { Component } from 'react'
  import './login.css'
  
  export default class Login extends Component {
  
    constructor(props) {
      super(props)
      this.state = {
        firstName:'',
        lastName:'',
        email:''
      }
  
      this.onChangeHandler = this.onChangeHandler.bind(this)
      this.onSubmitHandler = this.onSubmitHandler.bind(this)
    }
  
    onChangeHandler(e){
      this.setState({ [e.target.name]: e.target.value })
    }
  
    onSubmitHandler(e){
      e.preventDefault();
      console.log(this.state)
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.onSubmitHandler}&gt;
            &lt;label&gt;
              FirstName:
              &lt;input type="text" name="firstName" value={this.state.firstName} onChange={this.onChangeHandler} /&gt;
            &lt;/label&gt;
  
            &lt;label&gt;
              LastName:
              &lt;input type="text" name="lastName" value={this.state.lastName} onChange={this.onChangeHandler} /&gt;
            &lt;/label&gt;
  
            &lt;label&gt;
              Email:
              &lt;input type="text" name="email" value={this.state.email} onChange={this.onChangeHandler} /&gt;
            &lt;/label&gt;
            &lt;button type="submit" className="btn btn-default"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>loginAction.js:</p>
  
  <pre><code>import { ADD_USER } from './types';
  import axios from 'axios';
  
  export const userLoginRequest = () =&gt; dispatch =&gt; {
      axios.post(`localhost:5000/api/users`)
      .then( userdata =&gt; 
          dispatch({
              type: ADD_USER,
              payload: userdata
          })
      )
      .catch( error =&gt; {
          console.log(error);
      });
  };
  </code></pre>
  
  <p>loginReducer.js:</p>
  
  <pre><code>import { ADD_USER } from '../actions/types';
  
  const initialState = {
      firstName: '',
      lastName: '',
      email: ''
  }
  
  
  export default function (state = initialState, action) {
      switch (action.type) {
          case ADD_USER:
              return {
                  ...state,
                  items: action.payload
              };
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>I am not able to understand do I need to create 3 actions each one for firstname, lastname and email ? In that case what will be those 3 actions will it have 3 POST req in each of them ? </p>