Search code examples
angularobservablengrxngrx-storengrx-effects

API call won't happen in ngrx-angular6


I am new to ngrx.API call won't happen in ngrx-angular6. i have tried everything. i cant find where i am wrong. whole day wasted here.:(

In Effects i have called a service and getting observable

@Effect()
  isFileFeed$ = this.dataPersistence.fetch(LandingActionTypes.LoadIsFileFeed, {
    run: (action: LoadFileFeed, state: LandingState) => {
      const url = `www.sample.com`;
        this.service.apiRequest(url).pipe(
          map(function(status){
            new LoadFileSuccess(status);
          }),
          catchError(err => of(new LoadFileError(err.Description)))
        );
    },

    onError: (action: LoadFileFeed, error) => {
      console.error('Error', error);
      return new LoadFileError(error);
    }
  });

In Service i have used pipe along with tap. if i call subscribe directly API call Invokes. but here it wont call any API. am also verified in the network tab also.

apiRequest(url){
return this.http.get<any>(url)
        .pipe(tap(response =>
            this.log(`Service :api success: ${url}`);
          ),
          catchError(this.handleError)
        );
}

here is my code in selector

const getLandingState = createFeatureSelector<LandingState>('landing');

const getFileEnableStatus = createSelector(
  getLandingState,
  (state: LandingState) => state.isFileFeedEnabled
);

and i have consumed my observable through subscribe in my component like below.

    this.landingPageStore.pipe(select(landingSelector.landingQuery.getFileEnableStatus)).subscribe(res=>{
      this.isFileEnabled = res;
    })

Solution

  • If your effect isn't firing at all, it's possible that you never registered it in the imports section of your @NgModule.

    @NgModule({
      imports:[
        // Some imports
        EffectsModule.forRoot([MyEffectClass])
      ]
    })
    
    

    Another possibility is your lack of a returning the service's observable, and the function within the map function, you might have more luck with the following:

    return this.service.apiRequest(url).pipe(
      map((status: any) => {
        return new LoadFileSuccess(status)
      }
    
    

    Be sure that if you wrap the arrow function in curly braces that you explicitly add the return keyword, otherwise things will not work as expected.