7

I have been exploring ngrx (ngrx/store) lately. I have studied some classic examples on the net (a todo app). Great example. Now I am want to take it to the next level by letting my ngrx app do some API calls. Are there examples or guidelines how to setup a ngrx (redux) app to invoke and handle api calls?

It's my understanding that api calls within the context of my redux app are side-effects (functional programming paradigm). I am wondering how/where to implement API calls in a redux app.

user2120188
  • 427
  • 1
  • 4
  • 16
  • 1
    The [`ngrx/example-app`](https://github.com/ngrx/example-app) is a useful resource for guidance; it's a little larger than a todo and makes API calls. Said API calls are implemented using effects. – cartant Sep 09 '16 at 23:14
  • 1
    Thanks, Will dig into that. Btw, I discovered also ngrx-rest-app of Wormald et al. Also a handy example. – user2120188 Sep 09 '16 at 23:18

2 Answers2

10

Ngrx has its own library for side-effects ngrx/effects Some more information:

  1. Introduction: https://github.com/ngrx/effects/blob/master/docs/intro.md
  2. tutorial: https://stackoverflow.com/a/39626187/806963

There are not much resource about this library. You can find more here:

  1. https://gitter.im/ngrx/store?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
Community
  • 1
  • 1
Stav Alfi
  • 13,139
  • 23
  • 99
  • 171
  • If you're looking a medium size example with side effects (http + websocket) take a look into [Pizza-Sync](https://github.com/maxime1992/pizza-sync) :) – maxime1992 Oct 20 '17 at 14:43
1

Why side effect? Because ngrx says your reducer should be pure function, you can not use API asynchronous call in reducer. What your reducer does? -> it update your state and return updated state. So how you can make API in reducer? -> To achieve this, ngrx provide effect in @ngrx/effect.

Like reducer has switch case to identified action so effect will also subscribe all action and it will listen all actions.

How Effect will identified action? -->

like in reducer -

export function reducer(state = initialState, action: myActions.Actions) {
  switch (action.type) {    
    case myActions.actionType.SEND_CANDIDATE_OTP: {      
      return Object.assign({}, state, {otp:'test'});
    }
}

Effect will look like ->

    export class CandidateEffect {
      @Effect()
      sendCandidateOTP$: Observable<Action> = this.action$
        .ofType(myActions.actionType.SEND_CANDIDATE_OTP)
        .pipe(
          switchMap((action: myActions.GetCandidateAction) => {
            const input: myModel.GetCandidateInput = action.payload;
            return this.candidateService.SendCandidateOTP(input).pipe(
              map(resp => {
                return new myActions.SendCandidateOTPSuccessAction(resp);
              }),
              catchError((err, caught) => {
                return of(new myActions.SendCandidateOTPFailAction(err));
              })
            );
          })
        );
}

In the above piece of code you will identified action using typeOf keyword from ngrx.

viveksharma
  • 557
  • 4
  • 9