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

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

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，以便组件可以观察它们。

主要想法如下：

您的组件会调度操作GET_ITEMS （例如）
您的缩减器会将state.loading设置为true
听取GET_ITEMS操作的副作用会触发对后端服务器的 http 调用。然后，根据收到的回复，相同的副作用将发送GET_ITEMS_SUCCESS或GET_ITEMS_FAIL行动。
您的reducer应重新创建一个包含更新loaded和loading值的新状态。与此同时，您的组件正在观察它们并通过相应地显示或隐藏/禁用数据来更新DOM。

使用Angular和ngRx显示微调器和加载活动

1 个答案: