@acandylevey/ngrx-http-tracking 中文文档教程

Question

ngrx-http-tracking

这个 NGRX 库旨在插入您现有的 NGRX 存储，以减少您需要编写的样板代码的数量，并使处理 HTTP 请求的加载、成功和错误状态变得更加容易。

安装

npm i @acandylevey/ngrx-http-tracking

导入模块

...
import { NgrxHttpTrackingModule } from '@acandylevey/ngrx-http-tracking';

 imports: [
    ...
    NgrxHttpTrackingModule,
 ]

创建一个 http-tracked 动作

export const fetchUsers = createTrackingActions<UserRequest, User[]>(
  'Users',
  'fetchUsers'
);

创建你的效果

import { UserApiService } from './user-api.service';
import * as UserActions from './user.actions';
...
fetchUsers$ = createTrackingEffect(
    this.actions$,
    UserActions.fetchUsers,
    this.userApi.fetchUsers,
    'Could not load users'
  );

你的 reducer 没有太大变化，只是你不再需要担心跟踪加载状态

const usersReducer = createReducer(
  initialState,
  on(UserActions.fetchUsers.loaded, (state, { payload }) =>
    userssAdapter.setAll(payload, { ...state })
  )
);

跟踪结果

默认情况下，所有动作都带有一个全局标签然后可以很容易地在全局级别拦截，以提供全局错误处理或全局加载微调器（如果有任何操作正在等待 http 请求）。

 isLoaded$ = this.httpTracker.isLoaded(UserActions.fetchUsers);
 isLoading$ = this.httpTracker.isLoading(UserActions.fetchUsers);

 isGloballyLoading$ = this.httpTrackingFacade.getGlobalLoading();
 globalErrors$ = this.httpTrackingFacade.getGlobalErrors();

您还可以将自己的标签应用于一组操作，然后返回汇总结果

export const fetchUsers = createTrackingActions<UserRequest, User[]>(
  'Users',
  'fetchUsers',
  true, // has global tag still
  ['user-profiles']
);

isTagLoading$ = this.httpTracker.isTagLoading('user-profiles');

还有一种提供的方法可以在 http 请求已解决（成功或失败）后继续执行一段逻辑

中触发请求

 fetchUsers() {
    this.store.dispatch(UserActions.fetchUsers.loading());
    return UserActions.fetchUsers;
  }

从外观跟踪 它

this.httpTrackingFacade
      .getResolved(this.userFacade.fetchUsers())
      .subscribe((result) => {
        console.log(`The result from the fetch users call was: {result}`);
      });