¿Cómo puedo recibir una respuesta HTTP en el componente donde envío la acción? Después de que la acción devuelve el estado de 200 si registro la respuesta en la consola, obtengo los datos de todo el estado, no la respuesta HTTP real de mi API. Hay ciertos escenarios en los que recibo mensajes dinámicos de éxito de la API después del éxito, que he mostrado usando tostadas de mi componente
¿Cómo puedo obtener la respuesta real dentro de mi componente después de enviar una acción?
componente.ts
loadHolidays() { const param = { holidayFor: 1, userId: 12 }; this._store .dispatch(new FetchHolidays(param)) .pipe( catchError((error) => { throw error; }) ) .subscribe({ next: (result) => { console.log(result); //result returns entire state not the actual HTTP response } }); }Tienda.ts
@Action(FetchHolidays) fetchAllHolidays( ctx: StateContext<CalendarStateModel>, { param }: FetchHolidays ) { return this._http.post('endpoint', param).pipe( tap((apiResult) => { const data = apiResult.response.data; const holidays = data.holidayLists as IHoliday[]; ctx.patchState({ holidaysList: holidays }); }) ) }No puede hacerlo de esta manera, porque la función de dispatch devuelve un observable (de todo el estado) "que puede usarse para responder a la finalización de cada una de estas acciones" .
Creo que es mejor en su caso de uso usar un servicio en el nivel superior de su aplicación para manejar mostrar la tostada en función del mensaje y el estado (éxito/fallido) que pasó al servicio, al que se puede llamar desde cualquier lugar en su proyecto (por ejemplo, en su estado).
Pero de todos modos, si necesita que el resultado esté en el estado, y en el momento en que necesita usarlo en el componente, entonces debe almacenar la response en el estado, al lado del result , luego acceda a él en el componente usando el selector , como el siguiente:
estado.ts
@Selector() static holidaysResponse(state: CalendarStateModel) { return state.response; } @Action(FetchHolidays) fetchAllHolidays( ctx: StateContext<CalendarStateModel>, { param }: FetchHolidays ) { return this._http.post('endpoint', param).pipe( tap((apiResult) => { const data = apiResult.response.data; const holidays = data.holidayLists as IHoliday[]; ctx.patchState({ holidaysList: holidays, response: apiResult.response, }); }) ); }componente.ts
loadHolidays() { const param = { holidayFor: 1, userId: 12, }; this._store .dispatch(new FetchHolidays(param)) .pipe( catchError((error) => { throw error; }) ) .subscribe({ next: () => { // get the holidayResponse after the action completed: const response = this._store.selectSnapshot( CalendarState.holidaysResponse ); }, }); }