React/Redux：データベースにレコードを作成し、新しく作成したレコードにアクセスする

Question

私はreact/reduxにいるので、バックエンドデータベース（Mongo）に新しいレコードを作成して、レコードが作成された後に使用するレコード。レコードを作成することはできますが、レコード作成アクションを呼び出す同じ関数内に一意のIDが必要です。私はプラットフォームの非同期性を利用してこれを行う方法を理解できません。

レコードはPerson（Peopleというコレクション内）です。私の下のために自分のコードが含まれている：

1. 記録
2. 減速コードを作成するために、ノードAPIを呼び出すアクションコード
3. createPersonアクションを呼び出す関数を持つコンポーネントを。

   import React from 'react'; 
   import { connect } from "react-redux" 
   import { createPerson } from '../../actions/peopleActions'; 
   
   @connect(
       (store) => { 
       return { 
        people: store.people.people, 
       }; 
       }, 
       (dispatch) => { 
       return { 
        createPerson:() => { 
        dispatch(createPerson()); 
        } 
       } 
       } 
   ) 
   export default class PeopleSearch extends React.Component { 
   
       createPerson =() => { 
       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 =() => { 
       return (
        <div> 
         <button onClick={this.createPerson}> 
         Create Person 
         </button> 
        </div>); 
       } 
   } 
   

   ：ノードAPIが応答すると、それは に新たに作成されたレコードを追加するので、それは、新しく作成されたレコードで応答ストアの新しい状態ここで

がアクションを呼び出すコンポーネントであることに注意してくださいここで

はアクションです：

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) => { 
     dispatch({type: "CREATE_PERSON"}); 
     axios.post(config.api_url + "/api/v2/person/create", body, axiosConfig) 
      .then((response) => { 
       dispatch({type: "CREATE_PERSON_FULFILLED", payload: response.data}) 
      }) 
      .catch((err) => { 
       dispatch({type: "CREATE_PERSON_REJECTED", payload: err}) 
      }) 
    } 
} 

そして、ここでは私の減速である：

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 
     }; 
    } 
} 

これ以上の情報が必要な場合は、私にお知らせください。ありがとうございました。

Answer 1

友人の助けを借りて、私が思いついた解決策は新しいアクションを作成し、新しい人物を作成するポストの.then内に追加コードを入れることでした。このコードは、createPersonポストの応答から新しく作成されたIDを取得できます。

import axios from 'axios'; 
import cookie from 'react-cookie'; 

import config from '../config.js'; 

const fgtoken = cookie.load('fg-access-token'); 

var axiosConfig = { 
    headers: {'x-access-token': fgtoken} 
}; 

export function newPerson() { 

    const body = { object: {} }; 
    var newChild; 

    // create a new blank person record for a child 
    return (dispatch) => { 
    dispatch({type: "CREATE_PERSON"}); 
    axios.post(config.api_url + '/api/v2/person/create', body, axiosConfig) 
     .then((response) => { 
     newChild = response.data; 
     dispatch({type: "CREATE_PERSON_FULFILLED", payload: response.data}) 

     /******* NEW CODE HERE ***********/ 
     const birthBody = { 
      object: { 
      person_id: newChild._id, 
      eventType: 'Birth', 
      } 
     } 

     // create a blank birth record for the newly created person because we don't trust people without a birthdate. 
     dispatch({type: "CREATE_EVENT"}); 
     axios.post(config.api_url + '/api/v2/event/create', birthBody, axiosConfig) 
      .then((response) => { 
      dispatch({type: "CREATE_EVENT_FULFILLED", payload: response.data}) 
      }) 
      .catch((err) => { 
      dispatch({type: "CREATE_EVENT_REJECTED", payload: err}) 
      }); 
     }) 
     .catch((err) => { 
     dispatch({type: "CREATE_PERSON_REJECTED", payload: err}) 
     }) 

    } 
}