How can I save a new record then use the ID of new record to change another Select Component?

Viewed 53

I have a Trip form that contains an antD Select component. One of the options in this list of Venues has a value of -1 and is labelled * New *. When this is selected a couple of inputs are then displayed and when their Form is submitted I use Redux to populate the DB via an API call. This all works well.

enter image description here

However, once a new Venue is created, I want the Venue Select component to automatically change to the newly created Venue. My code is as follows:

When the Venue Management Save button is clicked, this method is called in a container component:

  function handleVenueSave(event) {
    setSaving(true);
    props.actions
      .saveVenue(venue)             // 'venue' is the object we are creating
      .then(() => {
        setSaving(false);
        handleLoadVenuesByUser();   // Reloads the list in the Select
      })

  }

saveMenu is called from the venuesActions and looks as follows:

export function saveVenue(venue) {
  //eslint-disable-next-line no-unused-vars
  return function (dispatch, getState) {
    dispatch(beginApiCall());
    return venuesApi
      .saveVenue(venue)
      .then((savedVenue) => {
          dispatch({ type: types.CREATE_VENUE_SUCCESS, savedVenue});
      })
      .catch((error) => {
        dispatch(apiCallError(error));
        throw error;
      });
  };
}

The API call is made via venuesApi.saveVenue(venue) and it returns the newly created venue along with its new Id from the database.

Then in the reducer:

const saveNewVenueSuccess = (state, action) => {
  return { ...state, newVenueId: action.venue[0].Id };
};

export default function venuesReducer(state = initialState.venue, action) {
  switch (action.type) {
     case types.CREATE_VENUE_SUCCESS:
      return saveNewVenueSuccess(state, action);
    default:
      return state;
  }
}

As you can see, I am passing the newly created Id to state.venue.newVenueId (which is defulted to -1). However, when I try to reference this state as part of the save process it is always one value behind. For example, in mapStateToProps I am getting this state value:

newVenueId: state.venues.newVenueId,

and if I try refferencing it in the original Save function that called the action, it will first come back as -1:

enter image description here

At this point, I check the database and it has been inserted with an Id of 61, however I am still getting -1. If I do a subsequent save of a new Venue that state value comes in as 61 but the DB saved a venue with Id: 62... So on a so forth.

I am still learning a lot of this redux so cant help but feel I am missing something obvious . Is there a quick/easy way of doing what I am looking for...? Any help would be greatly appreciated.

0 Answers
Related