React/Redux: 在数据库中创建记录并访问新创建的记录

Question

我在react / redux中，我想在后端数据库中创建一条新记录（即Mongo），然后获取新创建的记录的唯一id，以便在记录后使用创建。我可以很好地创建记录，并且我想要调用创建记录操作的同一函数中的唯一 ID。我不知道如何利用平台的异步特性来做到这一点。

记录是一个人（在一个名为 People 的集合中）。下面我包含了我的代码：

The component with the function that calls the createPerson action

The action code that calls the node API to create the record

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

调用动作的组件如下：

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

动作如下：

    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

在朋友的帮助下，我想到的解决方案是创建一个新操作，并将附加代码放入创建新人的 post 的 .then 中。这段代码可以从createPerson的响应中得到新创建的ID post.

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

  }
}

React/Redux: 在数据库中创建记录并访问新创建的记录

React/Redux: Create record in database and access newly created record

reactjs

react-redux