Question

我在react / redux中，我想在后端数据库（Mongo）中创建一个新记录，然后获取创建记录后要使用的新创建记录的唯一ID。我可以很好地创建记录，并且我希望在调用创建记录操作的同一函数中使用唯一的id。我无法弄清楚如何使用平台的异步性质来做到这一点。

记录是Person（在名为People的集合中）。下面我已经包含了我的代码：

具有调用createPerson操作的函数的组件

调用节点API以创建记录的操作代码

减速机代码。请注意，当节点API响应时，它会使用新创建的记录进行响应，因此会将新创建的记录添加到   商店的新州

以下是调用操作的组件：

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

在朋友的帮助下，我提出的解决方案是创建一个新动作，并将附加代码放在创建新人的帖子的.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})
      })

  }
}

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

1 个答案: