使用 Angular 和 ngRx 显示旋转器和加载活动

Question

我正在使用 ngRx 开发一个 Angular 应用程序，并尝试运用其最佳实践。但我发现我无法找到如何正确进行，那就是在异步操作发生时处理它们，并向用户提供适当的反馈！

提供用户的反馈并防止他两次点击发送按钮是非常好的，但是，我再次不清楚如何使用 Angular 和 ngrx 以良好的方式做到这一点。回到AngularJs，我使用了AngularUiBlock，它可以拦截所有http请求并显示block-ui div（这可以防止按钮被点击），也是一个很好的旋转器，但我没有找到ng2的这样的解决方案。我应该使用全局操作来加载并使用全局效果来显示此元素吗？每个组件都必须实现这个逻辑吗？

Answer 1

正确的方法是跟踪模型状态中的服务器交互：

export interface ItemState {
  entities: { [id: number]: Item };
  loaded: boolean;
  loading: boolean;
}

export const initialState: ItemState = {
  entities: {},
  loaded: false,
  loading: false
};

然后，您的减速器应该在根据分派的操作更新应用程序状态时正确编辑它们。也许是这样的：

export function reducer(state = initialState, action: fromItems.ItemsAction): ItemState {
  switch (action.type) {
    case fromItems.CREATE_ITEM:
    case fromItems.LOAD_ITEMS: {
      return {
        ...state,
        loading: true
      };
    }

    case fromItems.CREATE_ITEM_SUCCESS:
    case fromItems.LOAD_ITEMS_SUCCESS: {
      const items = action.payload;
      const entities = ...
      return {
        ...state,
        loading: false,
        loaded: true,
        entities
      };
    }

    case fromItems.CREATE_ITEM_FAIL:
    case fromItems.LOAD_ITEMS_FAIL: {
      return {
        ...state,
        loading: false,
        loaded: false
      };
    }
    ...

您还可以在官方 ngrx 演示应用程序中看到类似的示例。您还需要为它们创建选择器，就像这里所做的那样，以便您的组件可以观察到它们。

主要思想如下：

1. 您的组件调度一个操作GET_ITEMS （作为示例）
2. 您的减速器将设置state.loading为true
3. 监听该操作的副作用GET_ITEMS将触发对后端服务器的http调用。然后，根据收到的响应，相同的副作用将调度 aGET_ITEMS_SUCCESS或GET_ITEMS_FAIL操作。
4. 你的减速器应该重新创建一个具有更新loaded和loading值的新状态。与此同时，您的组件正在观察它们并通过相应地显示或隐藏/禁用数据来更新您的 DOM。