Вызов API не произойдет в ngrx-angular6 - PullRequest
Новая
       18

Вызов API не произойдет в ngrx-angular6

0 голосов
/ 13 мая 2019

Я новичок в ngrx.API вызов не произойдет в ngrx-angular6. Я перепробовал все. Я не могу найти, где я не прав. весь день здесь потрачен впустую. :(

В результате я позвонил в службу и стал заметным 

@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);
    }
  });

В Сервисе я использовал трубу вместе с краном. если я звоню, подписывайся напрямую, API вызывает. но здесь это не будет вызывать любой API. Я также проверен на вкладке сети. 

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

вот мой код в селекторе 

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

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

и я выполнил свой наблюдаемый через подписку в моем компоненте, как показано ниже. 

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

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

Если ваш эффект вообще не срабатывает, возможно, вы никогда не регистрировали его в разделе импорта вашего @NgModule.

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

Другой возможностью является отсутствие у вас возможности возврата наблюдаемой службы и функции в функции карты. Возможно, вам повезет больше с: 

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

Убедитесь, чтоесли вы поместите функцию стрелки в фигурные скобки, то явно добавите ключевое слово return, иначе все будет работать не так, как ожидалось.

0 голосов
/ 13 мая 2019

В принципе, я не знаю наверняка, что вы здесь делаете 

this.dataPersistence.fetch(LandingActionTypes.LoadIsFileFeed, {
    run: (action: LoadFileFeed, state: LandingState) => {

, но это не способ написать эффект, вы должны слушать, как действие отправляется в компоненте в вашем эффекте.как это.actions $ .ofType (auth.LOGIN)

Вы можете увидеть мой пример

У меня есть служба входа 

login(userCredentials: UserCredentials): Observable<any> {
        const loginUrl =  `${environment.serverUrl}/auth?grant_type=password&username=${userCredentials.account}&password=${userCredentials.password}`;
        return this.http.get(loginUrl);
}

Мой эффект будет выглядеть такэто 

  @Effect()
  login$: Observable<Action> = this.actions$
    .ofType(auth.LOGIN)
    .mergeMap((action: auth.Login) =>
      this.loginService
        .login(action.payload)
        .map(responseData => {
          const statusCode = responseData.json().code;
          const data = JSON.parse(responseData.json().data) as TokenModel;
          const message = responseData.json().message;
          const userInfo = {
            account: data.account,
            access_token: data.access_token,
            expire_in: data.expires_in,
            refresh_token: data.refresh_token,
            userId: data.userId
          };
          this.storageSerivce.setObject(environment.authKey, userInfo);
          return { type: LOGIN_SUCCESS, payload: data };
        })
        .catch(error => {
          return of({ type: LOGIN_FAIL, payload: error.statusText });
        })
    );
...