angular - 使用 Angular 和 ngRx 显示微调器和加载事件

Question

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

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

Answer 1

正确的方法是在模型状态下跟踪服务器交互:

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

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

然后你的 reducers 应该在更新应用程序状态时根据分派(dispatch)的 Action 正确地编辑它们。可能是这样的:

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
      };
    }
    ...

您还可以在 the official ngrx demo app 中看到类似的示例.您还需要在完成时为它们创建选择器 here这样它们就可以被您的组件观察到。

主要思想如下:

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