Búsqueda de sitios web

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

  1. Fusiona las 2 acciones: NewsActions.GET_ALERT_ARTICLES_REQUEST y NewsActions.GET_ALERT_FILTER_REQUEST en una, tal vez NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST
  2. Tus 2 efectos ahora escuchan la misma acción NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST
  3. Cuando despaches la acción NewsActions.GET_ALERT_FILTER_SUCCESS, debes guardar el parámetro necesario para el efecto getAlertArticles$ en el store.
  4. 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),