title: React/Redux: Create record in database and access newly created record
body: <p>I'm in react / redux and I want to create a new record in the backend database (which is Mongo) and then get the unique id of the newly created record to use after the record is created. I can create the record just fine, and I want the unique id in the same function that calls the create record action. I can't figure out how to do this with the async nature of the platform. </p>
  
  <p>The record is a Person (inside an collection called People). Below I have included my code for:</p>
  
  <blockquote>
    <ol>
    <li>The component with the function that calls the createPerson action</li>
    <li>The action code that calls the node API to create the record</li>
    <li>The reducer code. Note that when the node API responds, it responds with the newly created record, so it adds the newly created record to
    the store's new state</li>
    </ol>
  </blockquote>
  
  <p>Here is the component that calls the action:</p>
  
  <pre><code>import React from 'react';
  import { connect } from "react-redux"
  import { createPerson } from '../../actions/peopleActions';
  
  @connect(
    (store) =&gt; {
      return {
        people: store.people.people,
      };
    },
    (dispatch) =&gt; {
      return {
        createPerson: () =&gt; {
          dispatch(createPerson());
        }
      }
    }
  )
  export default class PeopleSearch extends React.Component {
  
    createPerson = () =&gt; {
      this.props.createPerson();
      /*****************
      This is where I want to be able to execute only once the new person 
      is created and get the ID of the newly created record. But currently, 
      this next line outputs the people array as it exists before the new 
      record is created.
      *****************/
      console.log("After createPerson, with: ", this.props.people);
    };
  
      render = () =&gt; {
      return (
        &lt;div&gt;
            &lt;button onClick={this.createPerson}&gt;
              Create Person
            &lt;/button&gt;
        &lt;/div&gt;);
    }
  }
  </code></pre>
  
  <p>Here is the action:</p>
  
  <pre><code>    import axios from "axios";
      import cookie from "react-cookie";
  
      import config from "../config.js";
  
      export function createPerson(fName, mName, lName, sexAtBirth, notes) {
  
      const body = {
          object: {
              fName,
              mName,
              lName,
              sexAtBirth,
              notes
          }
      };
      return (dispatch) =&gt; {
          dispatch({type: "CREATE_PERSON"});
          axios.post(config.api_url + "/api/v2/person/create", body, axiosConfig)
              .then((response) =&gt; {
                  dispatch({type: "CREATE_PERSON_FULFILLED", payload: response.data})
              })
              .catch((err) =&gt; {
                  dispatch({type: "CREATE_PERSON_REJECTED", payload: err})
              })
      }
  }
  </code></pre>
  
  <p>And here is my reducer:</p>
  
  <pre><code>export default function reducer(
      state={
          people: [],
          fetching: false,
          error: null,
      },
      action = ""
  ) {
      case "CREATE_PERSON": {
          return {
              ...state,
              fetching: true
          };
      }
      case "CREATE_PERSON_FULFILLED": {
          return {
              ...state,
              fetching: false,
              people: [
                  ...state.people,
                  action.payload
              ]
          };
      }
      case "CREATE_PERSON_REJECTED": {
          return {
              ...state,
              fetching: false,
              error: action.payload
          };
      }
  }
  </code></pre>
  
  <p>If you need anymore information from me to help with this, please let me know. Thank you.</p>