如果使用ngrx/store和效果，服务有什么用？

Question

我正在尝试将 NGRX 添加到我的 Angular 项目中，但我不知道我是否仍然需要服务，因为组件可以调度操作。这是否意味着我不必使用 ngrx/store 以外的任何服务？

Answer 1

我还是用服务来封装逻辑。通常，组件与服务对话，而服务与商店对话。

我发现服务的作用范围不仅仅是存储，因此删除它们会给商店组件带来太多责任/业务逻辑。

我的商店专注于类似 api 的简单操作，这些操作简短且易于测试，例如

  static INITIALIZE_CONFIG_REQUEST = 'INITIALIZE_CONFIG_REQUEST';
  static INITIALIZE_CONFIG_SUCCESS = 'INITIALIZE_CONFIG_SUCCESS';
  static INITIALIZE_CONFIG_FAILED  = 'INITIALIZE_CONFIG_FAILED';
  static INITIALIZE_CONFIG_TEMPLATE_ERROR  = 'INITIALIZE_CONFIG_TEMPLATE_ERROR';

  createInitializeConfigRequest() { // separate from invoking call for easier testing
    return {
      type: ConfigActions.INITIALIZE_CONFIG_REQUEST,
      httpRequest: {
        url: 'api/path/to/config',
        successAction: this.createInitializeConfigSuccess,
        failedAction: this.createInitializeConfigFailed,
        validateResponse: (data) => this.checkTemplate(data)
      }
    };
  }
  initializeConfigRequest() {  // called by config.service
    this.store.dispatch( this.createInitializeConfigRequest() );
  }

  createInitializeConfigSuccess(data) {
    const payload = data;
    return {
      type: ConfigActions.INITIALIZE_CONFIG_SUCCESS,
      payload
    };
  }

  createInitializeConfigFailed(error) {
    return {
      type: ConfigActions.INITIALIZE_CONFIG_FAILED,
      payload: {
        error
      }
    };
  }

使用这种模式，我可以更轻松地添加中间件，例如上面处理 httpRequest 和 Response 验证的中间件。

大多数缩减都是通过单个通用缩减器完成的，该缩减器假设有效负载属性与存储属性完全对应。这是我最喜欢的约定，因为现在我有一组通用减速器的综合测试，而不是 n 个减速器的 n 次重复测试。

  genericActionHandler(state, action) {
    if (!action.payload) {
      return state;
    }
    const newState = {...state};
    Object.assign(newState, action.payload);
    return newState;
  }

希望这能让您对我的架构有所了解。

Answer 2

Effects 专门用于与 APIs 和其他实体 external 应用程序交互，并在 NGRX 规范中定义。他们不了解并且不应该了解本地路由器状态、生命周期挂钩等类似信息：他们甚至不知道存在组件的一部分，除非通过操作有效负载明确告知此组件的某些方面。

另一方面，注入到组件中的服务确实知道这些事情，或者可以很容易地提供这些知识。

因此，当您想做任何自包含且仅限于您的内部应用程序的事情时，您可以使用服务。当您希望某个操作触发某种外部交互时，例如 API 调用，或打开网络套接字或 ssh 连接，您可以使用效果。

注意：如果您希望在您的组件中创建和销毁您的服务，您需要将其定义为组件元数据中的提供者，在组件本身中，因为在模块级别提供的服务将是单例.

补充阅读：

https://medium.com/@m3po22/stop-using-ngrx-effects-for-that-a6ccfe186399

https://ngrx.io/guide/effects

如果使用ngrx/store和效果，服务有什么用？

What is the use of services if you use the ngrx/store and effects?

angular

ngrx

ngrx-effects

ngrx-store-4.0