Как использовать @ ngrx / Effects с простым http-вызовом? - PullRequest
Новая
       20

Как использовать @ ngrx / Effects с простым http-вызовом?

0 голосов
/ 07 сентября 2018

У меня очень простой http сервис: 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';

import { JsOrder } from '../stores/models/order';

@Injectable({
    providedIn: 'root'
})
export class OrderService {
    private ordersUrl = `${environment.httpApiUrl}/orders`;

    constructor(private http: HttpClient) {}

    fetchOrders(): Observable<JsOrder[]> {
        return this.http.get<JsOrder[]>(this.ordersUrl);
    }
}

Я пытаюсь вызвать его из @ ngrx / Effects (основываясь на нескольких примерах в Интернете): 

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

import { FETCH_ORDERS, LoadOrders } from '../actions';
import { JsOrder, Order } from '../models/order';
import { OrderService } from '../../services/order.service';

@Injectable()
export class OrderEffects {
    constructor(
        private actions$: Actions,
        private orderService: OrderService
    ) {}

    @Effect()
    fetchOrders$: Observable<Action> = this.actions$.pipe(
        ofType(FETCH_ORDERS),
        switchMap(() => {
            return this.orderService
                .fetchOrders()
                .map((jsOrders: JsOrder[]) => {  <---- compilation error here
                    const orders = jsOrders.map(jsOrder =>
                        Order.create(jsOrder)
                    );
                    return new LoadOrders(orders);
                });
        })
    );
}

Однако я получаю ошибку компиляции при вызове .map() выше:

ошибка TS2339: свойство 'map' не существует для типа 'Observable'

Какой правильный способ сделать это?

P.S. Я также попытался subscribe() к Observable, возвращенному службой http (см. Ниже), но это также выдает ошибку компиляции (свойство 'map' не существует в типе 'Subscription'): 

@Effect()
fetchOrders$: Observable<Action> = this.actions$.pipe(
    ofType(FETCH_ORDERS),
    switchMap(() => {
        return this.orderService
            .fetchOrders()
            .subscribe((jsOrders: JsOrder[]) => {
                return jsOrders.map(jsOrder => Order.create(jsOrder));
            })
            .map((orders: Order[]) => new LoadOrders(orders));
    })
);

1 Ответ

0 голосов
/ 07 сентября 2018

Вы должны использовать pipe и операторы pipeable: 

@Effect()
fetchOrders$: Observable<Action> = this.actions$.pipe(
    ofType(FETCH_ORDERS),
    switchMap(() => {
        return this.orderService
            .fetchOrders()
            .pipe(
                map((jsOrders: JsOrder[]) => {  
                  const orders = jsOrders.map(jsOrder =>
                      Order.create(jsOrder)
                  );
                  return new LoadOrders(orders);
                }),
               catchError(err => of(new LoadOrdersFailure(err)))
            )
    })
);

Также не забывайте ловить ошибки.

...