如何使用 ngrx 注入存儲依賴項

Question

我是 Angular 的新手，ngrx 的新手...

我有一個注射問題，我確信它很容易克服，只要我理解它，但我現在正在兜圈子，一次有太多新概念。 看起來很簡單。 當應用程序加載時，我使用 clientId/clientSecret 使用 clientauth.service 進行身份驗證並返回一個令牌。 此令牌保存在存儲中並用於通過 api.service 對 API 的任何進一步請求。

app.component.ts

this.store.dispatch(new ClientAuthActions.ClientAuthLoginRequest({ clientId: environment.clientId, clientSecret: environment.clientSecret }));

clientauth.effect.ts

constructor(
    private actions$: Actions,
    protected authService: ClientAuthService,
  ) {}

@Effect()
  login$ = this.actions$.pipe(
    ofType(clientauthActions.ClientAuthActionTypes.ClientAuthLoginRequest),
    switchMap((user: ClientAuthUser) => {
      return this.authService.login(user)
      .pipe(
        map((token: ClientAuthToken) => {
          return new clientauthActions.ClientAuthLoginSuccess(token);

        }),
        catchError(error => of(new clientauthActions.ClientAuthLoginFailure({error}))) //TODO, handle the error
      )
    })
  );
}

clientauth.service.ts

@Injectable()
export class ClientAuthService {
  constructor(
    protected apiService: ApiService,
  ) {
  }

  login(user: ClientAuthUser) {
.....
   return this.apiService.postClientLogin(user);
  }

api.service.ts

@Injectable()
export class ApiService {
  constructor(
    protected httpClient: HttpClient,
    protected store: fromClientAuth.State,
    ) {
  }


  getHttpHeaders(): HttpHeaders {

    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
    });

    if (this.store.token) {
     return headers.append('Authorization', `Bearer ${this.store.token.accessToken}`);
    }

    return headers;
  }

  postClientLogin(...);

但是我的依賴注入有問題，我收到錯誤：錯誤：無法解析 ApiService 的所有參數：（[object Object]，？）。

我嘗試將以下內容添加到我的 app.module.ts 中，但我仍然得到相同的結果，而且我顯然在這里遺漏了一些東西。

import * as fromClientAuth from './store/reducers/clientauth.reducer';

export const CLIENTAUTH_REDUCER_TOKEN = new InjectionToken<
  ActionReducerMap<fromClientAuth.State>
>('ClientAuth Reducers');

export function getReducers(): ActionReducerMap<fromClientAuth.State> {
  // map of reducers (I guess something is missing here, but I don't know how to complete it)
  return {}
}

@NgModule({
...
imports:[
...
    StoreModule.forRoot(reducers, {
      metaReducers, 
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
      }
    }),
    StoreModule.forFeature(fromClientAuth.featureKey, CLIENTAUTH_REDUCER_TOKEN),
    EffectsModule.forRoot([AppEffects, ClientAuthEffects]),
],
providers: [
    ApiService,
    ClientAuthService,
    {
      provide: CLIENTAUTH_REDUCER_TOKEN,
      useFactory: getReducers,
    },
  ],
})

但我仍然得到同樣的錯誤。 有人可以指出我正確的方向嗎？

謝謝

Answer 1

export class ApiService {
constructor(
    protected httpClient: HttpClient,
    protected store: fromClientAuth.State  // <=
    ) {
  }

該行上的逗號使其假定您有 3 個參數，並且無法識別第三個參數。

Answer 2

您應該注入商店而不是直接注入您的 State model。

因此，將protected store: fromClientAuth.State替換為protected store: Store<fromClientAuth.State>至少應該解決第一個問題。

@Injectable()
export class ApiService {
  constructor(
    protected httpClient: HttpClient,
    protected store: Store<fromClientAuth.State>,
    ) {
  }

PS：您可以在 function 的最后一個參數的末尾留下一個逗號。