web-dev-qa-db-ja.com

Angular ngrx-読み込み中のgifを表示

私はこのような副作用があります：

@Effect()
FetchAllOrders$ = this.actions$
    .ofType(SalesOrderActions.FETCH_ALL_ORDERS)
    .switchMap((action: Action) => {
        return this.soApiService.getUsersSalesOrders(action.payload);
    })
    .map((salesOrders: ListDto<SalesOrderList>) => this.actions.fetchAllOrdersSuccess(salesOrders));

エフェクトの最初にロードシンボルを表示し、最後に非表示にします。

読み込みシンボルの表示を処理するために、アクション、レデューサー、およびストア状態の個別のセットを作成しました。

export class BusyActions {
static SHOW_SPINNER = "SHOW_SPINNER";
static HIDE_SPINNER = "HIDE_SPINNER";

showSpinner(): Action {
   return { type: BusyActions.SHOW_SPINNER };
}

hideSpinner(): Action {
   return { type: BusyActions.HIDE_SPINNER };
}

export const BusyState: IBusyState = {
   visible: false,
   busy: false
};

読み込み状態を他のモジュールや状態などと共有する必要があるため、このようにしました。

副作用からBusyActionsを呼び出すにはどうすればよいですか？最初にSHOW_SPINNERを呼び出し、最後にHIDE_SPINNERを呼び出す必要があります。

私はこれを正しく行いましたか？または、これを処理するためのより良い方法はありますか？

angularngrxngrx-storengrx-effects
16
user2859298

例を見てみましょう：ユーザーをフェッチしたい場合。

私が通常そのために行うこと：
-アクションをディスパッチしますFetchUser
-レデューサーで、usersにフラグを設定します：isUserFetching: true
-エフェクト内でそのアクションをキャッチする
-必要なもの、たとえばサービスを呼び出す
-サービスがフェッチしたものを返すとき、それを成功アクションにマップします：FetchUserSuccess
-問題が発生した場合は、エラーをエラーアクションにマップします：FetchUserError
-ユーザーレデューサーで、FetchUserSuccessの場合は、必要な操作を行い、isUserFetching: falseを設定します
-ユーザーレデューサーで、FetchUserErrorの場合は、必要な操作を行い、isUserFetching: falseを設定します

@Effect()
fetchUser$: Observable<Action> = this.actions$
  .ofType(FetchUser)
  .pipe(
    switchMap(action =>
      this.usersService.fetchUser(action.payload).pipe(
        map(
          res =>
            new FetchUserSuccess({
              id: action.payload.id,
              data: res,
            })
        ),
        catchError((err: HttpErrorResponse) => 
          of(new FetchUserError(action.payload))
        )
      )
    )
  );

ビュー内で、ストアの適切な部分を変数に選択できます。たとえば、isFetchingUser$とすると、次のようになります。

<div *ngIf="isFetchingUser$ | async; else #loadingUser">
  Show the user here
</div>

<div loadingUser>
  Fetching user information
</div>
18
maxime1992

これを実現するには、このnpmパッケージを使用できます https://www.npmjs.com/package/angular2-busy

あなたの場合にパッケージを使用するために必要なすべてのモジュールを追加した後、変数を宣言する必要があります

busy: Promise<any>;

または

busy: Subscription;

そして、以下のようにこの変数を使用します

this.busy = this.actions$
.ofType(SalesOrderActions.FETCH_ALL_ORDERS)
.switchMap((action: Action) => {
    return this.soApiService.getUsersSalesOrders(action.payload);
})
.map((salesOrders: ListDto<SalesOrderList>) => this.actions.fetchAllOrdersSuccess(salesOrders));

BusyActionsクラスを使用する場合は、このクラスをコンポーネントにインポートし、コンポーネントコンストラクターでプライベート変数を作成し、必要に応じてクラスの目的のアクションを呼び出す必要があります。しかし、私にとっては、非常にうまく機能する上記のパッケージを使用する方が良いです。

2
Manzurul