Angular ngrx - 显示加载中的 gif

Posted 2023-02-19

【中文标题】Angular ngrx - 显示加载中的 gif

【英文标题】：Angular ngrx - Show Loading gif

【发布时间】：2018-05-25 02:56:08

【问题描述】：

我有这样的副作用：

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

我想在效果的开头显示一个加载符号并在结尾隐藏它。

我创建了一组单独的 Actions、Reducers 和 store 状态来处理显示加载符号。

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。

我做对了吗？或者有没有更好的方法来处理这个问题？

【问题讨论】：

您的微调器会在您的整个应用程序之上吗？还是仅在特定组件之上？

@DeblatonJean-Philippe 不确定你在做什么，但我猜整个应用程序

【参考方案1】：

举个例子：如果你想获取一个用户。

我通常会这样做： - 发送操作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>

【讨论】：

+1 这是最好的方法。将调用拆分为 3 个操作：加载、成功、失败。在您的状态下拥有一个属性，例如“isLoading”。在您的“加载”效果中调用您的 API，然后映射以调度“成功”或“失败”操作。

@Maxime，如果您从另一个页面导航到用户页面，那么发送操作 FetchUser 的最佳位置是什么

【参考方案2】：

要实现这一点，你可以使用这个 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 类，那么你必须将这个类导入到你的组件中，并在组件构造函数中创建一个私有变量，并在需要的地方调用你想要的类操作。但对我来说，最好使用上面那个效果很好的包。