How to access parameters in an ngrx effect in Angular 2?

Question

I have a http service call that requires two parameters when dispatched:

@Injectable()
export class InvoiceService {
  . . .

  getInvoice(invoiceNumber: string, zipCode: string): Observable<Invoice> {
    . . .
  }
}

How do I subsequently pass those two parameters to this.invoiceService.getInvoice() in my Effect?

@Injectable()
export class InvoiceEffects {
  @Effect()
  getInvoice = this.actions
    .ofType(InvoiceActions.GET_INVOICE)
    .switchMap(() => this.invoiceService.getInvoice())  // need params here
    .map(invoice => {
      return this.invoiceActions.getInvoiceResult(invoice);
    })
}

Answer 1

You can access the payload within the action:

@Injectable()
export class InvoiceEffects {
  @Effect()
  getInvoice = this.actions
    .ofType(InvoiceActions.GET_INVOICE)
    .switchMap((action) => this.invoiceService.getInvoice(
      action.payload.invoiceNumber,
      action.payload.zipCode
    ))
    .map(invoice => this.invoiceActions.getInvoiceResult(invoice))
}

Or you can use the toPayload function from ngrx/effects to map the action's payload:

import { Actions, Effect, toPayload } from "@ngrx/effects";

@Injectable()
export class InvoiceEffects {
  @Effect()
  getInvoice = this.actions
    .ofType(InvoiceActions.GET_INVOICE)
    .map(toPayload)
    .switchMap((payload) => this.invoiceService.getInvoice(
      payload.invoiceNumber,
      payload.zipCode
    ))
    .map(invoice => this.invoiceActions.getInvoiceResult(invoice))
}