10

@ngrx/store と @ngrx/effects で Angular 2 アプリを作成しています。

アクション/効果などの外にロジックを配置する場所と、サービス関数を呼び出す場所を理解するのに苦労しています。

たとえば、認証では...

  1. ユーザーがログインをクリックするAUTH_REQUESTと、ログイン認証情報をペイロードとしてアクションがディスパッチされます。
  2. エフェクトはこのアクションを探し、API を呼び出します。
  3. 成功した結果はAUTH_SUCCESS、応答オブジェクト内のトークン、ユーザー名などをペイロードとして使用してアクションを呼び出します。ペイロードはレデューサーに送られ、AuthState.

例: でAuthEffects

@Effect() authenticate$ = this.updates$
.whenAction(AuthActions.AUTHENTICATE_REQUEST)
.switchMap(update => this.api.post('/authenticate', update.action.payload)
  .map((res:any) => ({type: AuthActions.AUTHENTICATE_SUCCESS, payload: res.json()}))
  .catch((err:any) => Observable.of({ type: AuthActions.AUTHENTICATE_ERROR, payload: err }))
);

のAuthReducer

 case AuthActions.AUTHENTICATE_SUCCESS:
  return Object.assign({}, state, <AuthState>{
    processing: false,
    failed: false,
    isLoggedIn: true,
    token: action.payload.token,
    username: action.payload.username,
    accountId: action.payload.accountId,
  });

私が知りたいのは：

  1. AUTH_SUCCESSアクションが処理された後にページを変更するためにルーターを呼び出す場所。エフェクト リアクティブ チェーン内からこれを行うか、それとも....??
  2. AuthService資格情報 (トークンなど) を LocalStorage に保存する必要があります。「トークンを保存する」ためにこれをどこに呼び出す必要がありますかauthService.store(userCredentials)。

どんな助けでも感謝します。

4

3 に答える 3

0

これらのタイプの機能を処理する ngrx の「公式」ライブラリ@ngrx/router-storeもあります。現在 @ngrx/router は @angular/router 3.0.0 (現在は RC1) を支持して廃止されており、移行ガイドで示されています。結果として、ルーターストアも同様に変更を受けており、angular ルーターに移行しており、保留中の PRのアドレス指定があります。すべてがうまくいけば少し落ち着くと、 router-store はナビゲーション目的でアクションクリエーターを提供し、エフェクトから戻るのに非常に便利です:

// ...
import { Effect, toPayload, StateUpdates } from '@ngrx/effects';
import { go } from '@ngrx/router-store';

// ... in custom effects class

@Effect() loginSuccess$: Observable<Action> = this.updates$
  .whenAction(LoginActions.LOGIN_SUCCEEDED)
  .map<ActionPayloads.LoginSucceeded>(toPayload)
  .do(successPayload => {
    // grab auth information you need to store
    // and save them now, accessing your local storage service

    const { authInfo, rememberMe } = successPayload;

    this.authStorage.save(authInfo, rememberMe);
  })
  .map(_ => go(homeRoutePath));

現在、これは機能していないようですが、router-store が更新されるとすぐに元に戻るはずです。HTH

于 2016-08-26T09:48:38.460 に答える