Tengo una función en un componente que agrega una entrada a mi estado 1 (en Redux a través de RTK).

La API me devuelve la identificación generada automáticamente de esta nueva entrada y la agrego al estado 1.

Luego necesito crear una entrada en un segundo estado 2 (tabla vinculada), usando la identificación de la entrada del estado 1 mencionada anteriormente.

Mi problema es que mi estado 1 no se actualiza directamente en el componente y solo se actualiza después de que se haya completado toda la función, por lo que no tengo acceso a la identificación de la nueva entrada del estado 1 en el momento correcto.

¿Cómo puedo acceder a este nuevo valor y especialmente al id en la función del componente?

Estado 1

 const spectacles = useAppSelector(spectacleSelector.selectAll);

Función para agregar una entrada en el estado 1

 const handleCreateClick = () => { MySwal.fire({ // not needed code }).then((result) => { if (result.isConfirmed) { dispatch(createSpectacleAsync(result.value!)) .then(() => dispatch(createSiteDeTirAsync({ id_Spe: spectacles[spectacles.length - 1]?.id!, code: "C" }))) .then(() => navigate(`/spectacles/${spectacles[spectacles.length - 1]?.id!}`)); } }); };

Función thunk asíncrona para crear la entrada en el estado1

 export const createSpectacleAsync = createAsyncThunk<Spectacle, string>( 'artifices/createSpectacleAsync', async (title: any, thunkAPI) => { try { return await agent.Spectacle.createSpectacle({ Titre: title }); } catch (error: any) { return thunkAPI.rejectWithValue({error: error.data}) } } )

ExtraReducer para gestionar la nueva entrada devuelta por la API

 builder.addCase(createSpectacleAsync.fulfilled, (state, action) => { spectacleAdapter.addOne(state, action.payload); state.status = 'idle'; });