如何访问 Angular NGRX 选择器中的服务

Question

在我的 Angular 应用程序中，我有一个选择器文件plan.selectors.ts，其中有一些非常复杂的选择器。检索数据时会执行大量计算，其中一些计算与应用程序中其他位置的业务逻辑共享。举一个简单的例子，我有一个DateService使用该Moment库的函数，它为应用程序提供了函数，例如getDatePlusHours我可以传入一个Date和几个小时，然后它返回新的日期。我希望能够在我的DateService选择器中使用此功能，但我只是想不出一种方法来做到这一点，因为我看不到如何注入服务。

plan.selectors.ts我正在尝试做的事情的简化看起来像这样：

import { createFeatureSelector, createSelector } from '@ngrx/store';

const getPlanFeatureState = createFeatureSelector<PlanState>('plan');

export const getStartDate = createSelector(
  state => state.startDate
);

export const getDuration = createSelector(
  state => state.duration
);

export const getEndDate = createSelector(
  getStartDate,
  getDuration,
  (startDate, duration) => {
    return dateService(startDate, duration);
  }
);

我试图防止将大量服务函数复制到我的选择器文件中。任何建议都非常欢迎。

Answer 1

NGRX 中的最佳实践是选择器仅读取和发送状态的一部分，即它不执行任何计算或外部服务调用。计算在Reducer中执行，外部服务在Effect中调用。 在这里您可以看到一个带有完整描述的好示例。如果您需要更多详细信息，请告诉我。