typescript - Cómo usar la carga útil de llamadas http anteriores en los efectos de ngrx
Soy nuevo en los efectos de ngrx, estoy construyendo una aplicación Angular 5 con ngrx store. Quiero despachar una acción desde la primera acción a la segunda acción, es decir, tengo dos acciones getAlertFilters y getAlertArticles.
- Quiero enviar una acción para obtenerAlertArtículos desde la acción obtenerFiltrosAlertas al recibir la respuesta de la función getFilters del servicio de noticias http. Necesito usar la misma carga útil que se usó para la acción obtenerFiltrosAlertas y necesito pasarla como una nueva carga útil con parámetros adicionales a la acción obtenerAlertArtículos.
Además, ¿cómo construyo un nuevo objeto ArticleRequest a partir de la respuesta de getFilters y lo paso como payload a la acción getAlertArticles? Por favor, guíame sobre cómo hacer esto. A continuación está mi código.
@Effect() getAlertArticles$ = this.actions$ .ofType(NewsActions.GET_ALERT_ARTICLES_REQUEST) .pipe( map((action: NewsActions.GetAlertArticlesRequest) => action.payload), switchMap((articlesRequest: ArticlesRequest ) => { return this.newsService.getArticles(articlesRequest.channel, articlesRequest.filter, articlesRequest.locale, articlesRequest.page) .pipe( tap(() => this.store.dispatch(new LoaderActions.HideLoader(config.LOADER_ID))), map(res => { return { type: NewsActions.GET_ALERT_ARTICLES_SUCCESS, payload: res }; }), catchError((e: HttpErrorResponse) => Observable.of({ type: NewsActions.GET_ALERT_ERROR, payload: e })) ); }), ); @Effect() getAlertFilters$ = this.actions$ .ofType(NewsActions.GET_ALERT_FILTER_REQUEST) .pipe( map((action: NewsActions.GetAlertFilterRequest) => action.payload), switchMap((filterRequest: FiltersRequest ) => { return this.newsService.getFilters(filterRequest.channel, filterRequest.locale) .pipe( tap((res) => { this.store.dispatch(new NewsActions.GetAlertArticlesRequest({channel: res.getChannel, filter: 768, locale: 'en_ca' , page: 1})); }), map(res => { return { type: NewsActions.GET_ALERT_FILTER_SUCCESS, payload: res }; }), catchError((e: HttpErrorResponse) => Observable.of({ type: NewsActions.GET_ALERT_ERROR, payload: e })) ); }),);
Respuesta #1
Creo que puedes hacerlo así:
- Fusiona las 2 acciones:
NewsActions.GET_ALERT_ARTICLES_REQUESTyNewsActions.GET_ALERT_FILTER_REQUESTen una, tal vezNewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST - Tus 2 efectos ahora escuchan la misma acción
NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST - Cuando despaches la acción
NewsActions.GET_ALERT_FILTER_SUCCESS, debes guardar el parámetro necesario para el efectogetAlertArticles$en el store. - En tu efecto
getAlertArticles$, agrega la siguiente cadena después de.ofType(NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST):
Aquí está el código:
getAlertArticles$ = this.actions$
.ofType(NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST)
.combineLatest(this.store.select(fromNews.getYourNeededData)
.filter(data => !isEmpty(data))
.pipe(
switchMap(([action, data]: [NewsActions.GetAlertFilterAndArticlesRequest, YourDataFormat]) => //do your request here),
