Angular, ngrx/store, выбор хранилища и асинхронный вызов в одной последовательности

Question

Кто-нибудь знает, есть ли шанс получить значение из магазина, а затем вызвать службу angular http? Смотрите пример ниже. Заранее спасибо.

У меня есть сервис с асинхронным методом. В этом методе я вызываю службу angular http, но прежде чем вызвать службу angular http, я хочу получить какое-то значение из хранилища (токен доступа oauth). Дело в том, что я храню oauth-токен в магазине, и мне нужно добавить токен в запрос. Если сервер отвечает с ошибкой 401, я обновляю токен и повторяю запрос или запросы с новым токеном.

@Injectable()
export class Interceptor {
   public get(request: Request): Observable<any> {
      return this.store.select((s) => s.session.accessToken)
         // tried .switchMap, it wasn't working for multiple requests
         // .flatMap also is not working
         // commented below is working but I don't think that it is right solution
         // return Observable.of(request)
         // .withLatestFrom(this.store.select((s) => {
         //    return s.session.accessToken
         // }))
         // .flatMap(([config, accessToken]) => { ... })
         .flatMap((accessToken) => {
            request.headers.set("Authorization", `Bearer ${accessToken}`);

            return this.http.request(request);
         })
         .map((response) => {
            return response.json();
         })
         .catch((response) => {
            return this.handleError(response, request);
         });
   }

   // handle errors
   private handleError(response: Response, request: Request): Observable<Response> {
       // handle outdated api tokens
       if (response.status === HttpStatusesEnum.Unauthorized) {
           const deferredRequest = new DeferredRequestModel({ request });

           // appends HTTP request configuration object with deferred response
           // attached to buffer
           this.buffer(deferredRequest );

           return deferredRequest.observable;
       }

       // handle server error
       if (response.status === HttpStatusesEnum.InternalServerError) {
           ...
       }

       ...

       return Observable.throw(response);
   }
}

export class DeferredRequestModel {
    public observable: AsyncSubject<Response>;
    public request: Request;

    constructor(obj?: Partial<DeferredRequestModel>) {
        this.observable = new AsyncSubject<Response>();
        this.request = obj && obj.request || null;
    }

    public reject(error?: any): void {
        this.end({ isValue: false, value: error });
    }

    public resolve(value?: any): void {
        this.end({ isValue: true, value });
    }

    private end(result: any): void {
        if (this.observable.isStopped) {
            console.warn("Deferred already resloved/rejected.");
            return;
        }

        if (result.isValue) {
            this.observable.next(result.value);
            this.observable.complete();
        } else {
            this.observable.error(result.error);
        }
    }
}

Затем, когда я позвоню в какой-нибудь сервис, он отправит запрос через перехватчик.

export class SomeEffect {
   constructor(private someService: SomeService) {}

   @Effect()
   public someMethod(): Observable<Action> {
      return this.actions$.ofType(SOME_ACTION_GET)
         .map((action: SomeActions.Get) => action.payload)
         .switchMap((someObj) => {
            // someMethod call interceptor inside someService, it won't call angular 
            // http service directly
            return this.someService.someMethod(someObj);
         })
         .map((someResult) => {
            return new SomeActions.GetSuccess(someResult);
         });
   }
}

Я пытался использовать switchMap в перехватчике, но он не будет работать, если перехватчик вызывается более одного раза.

Answer 1

Я бы сделал что-то подобное:

return this.store.select(reducers.getAccessToken)
  .take(1)
  .switchMap(token => {
    const headers = new Headers();
    headers.append('Authorization', `Bearer ${token}`);

    return this.http.get('...', { headers });
  });

getAccessToken метод создается в файле глобальных редукторов с помощью reselect сюда:

export const getAccessToken = createSelector(
  getAuthState, authReducer.getToken);

Answer 2

Если вас интересует только последнее значение, содержащееся в магазине, вы можете попробовать следующее:

public someMethod() {
   return this.store.select(s => s.config)
      .switchMap(config => {
         return this.http.request(config);
      });
}

Хотя я бы сказал, что только в странных случаях я вставляю экземпляр Store в сервис. Может быть, вы могли бы опубликовать больше информации о сценарии использования