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.
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:
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.

