ngrx EffectsModule - 需要帮助了解提供者的使用情况

Question

我试图了解 Angular 中提供者工厂的使用。我理解 Angular Documentation.

中提供的示例

但是，我在 ngrx EffectsModule (effects_module.ts).

中遇到了一个相当不寻常的 provider factory 用法

@NgModule({})
export class EffectsModule {
  static forFeature(featureEffects: Type<any>[]): ModuleWithProviders {
    return {
      ngModule: EffectsFeatureModule,
      providers: [
        featureEffects,
        {
          provide: FEATURE_EFFECTS,
          multi: true,
          deps: featureEffects,
          useFactory: createSourceInstances,
        },
      ],
    };
  }

  // *** <snip> forRoot method for brevity

}
export function createSourceInstances(...instances: any[]) {
  return instances;
}

我明白 multi:true 的目的。

但是，我很难弄清楚为什么 featureEffects 会被声明为提供者，并且还被用作 FEATURE_EFFECTS 的依赖项 - createSourceInstances(...instances: any[]) 实现了什么？

这个模式是什么，在哪里可以使用它？

Answer 1

让我们从 @ngrx/effects documentation.

开始

我们需要做的第一件事是创建一个AuthEffects服务

@Injectable()
export class AuthEffects {
  @Effect()
  ...

  constructor(private http: HttpClient, private actions$: Actions) {}
}

我们如何注册效果？

很简单：

EffectsModule.forRoot([AuthEffects])

或

EffectsModule.forFeature([AuthEffects])

现在，让我们停在这里想想什么是AuthEffects。

AuthEffects 只是普通的 angular 服务，可以具有任何依赖项（HttpClient 和 Actions 在这种情况下）将在 [= 的帮助下解决110=]DI系统。

我们正在将此服务传递给 EffectsModule，我们还可以创建更多效果：

EffectsModule.forFeature([AuthEffects, MySecondEffects, ...])

现在，假设我们是 EffectsModule.

的作者

我们让用户有机会通过创建 angular 服务来提供任意数量的效果。我们将在我们的图书馆中 use 这些服务：

addEffects(effectSourceInstance: any) {
    this.sources.addEffects(effectSourceInstance);
}

正如您所看到的，我们不仅需要类.

我们提供的服务实例

我们如何创建这些实例？

大概是这样的？

EffectsModule.forFeature([new AuthEffects(new HttpClient(...), new Actions(...))])

当然不是！我们可以让 angular DI 来做：

EffectsModule.forFeature([AuthEffects])
...

forFeature(featureEffects: Type<any>[]) {
  ....
    providers: [
        featureEffects,

现在 Angular DI 知道所有这些服务以及如何创建它们。但我作为作者也想在我的服务中使用它们，但我不知道如何获得它们...

@NgModule({})
export class EffectsFeatureModule {
  constructor(
    // i need to get all effects provided by users but they are hidden in DI system
    ...
  ) {

  }
}

幸运的是，我们可以提供一个将在内部使用并为库作者所知的令牌。

为此我们 creating InjectionToken:

export const FEATURE_EFFECTS = new InjectionToken<any[][]>(
  'ngrx/effects: Feature Effects'
);

并为 FEATURE_EFFECTS 令牌定义配方：

  featureEffects,
  {
    provide: FEATURE_EFFECTS,
    multi: true,
    deps: featureEffects,
    useFactory: (...instances: any[]) => {
       return instances;
    },
  },

multi 告诉我们这个标记可以定义多次（即我们有几次 forFeatures 调用）

deps 指定 FEATURE_EFFECTS 令牌将使用所有 featureEffects 实例将由 Angular DI 创建。

useFactory 将这些实例作为参数。

这样我们就知道注入 FEATURE_EFFECTS 令牌给了我们所有的效果实例。

让我们想想是否可以省略 featureEffects，例如：

{
  provide: FEATURE_EFFECTS,
  multi: true,
  useValue: featureEffects
},

如果我们这样做，那么我们将不会获得实例，而是类（函数）数组。但是我们需要所有实例化类，只有Angular DI是这里最好的朋友。

最后，虽然Angular DI 是一个非常强大的模式，但它也有一些限制。

在 AOT 中的以下代码：

  featureEffects,
  {
    provide: FEATURE_EFFECTS,
    multi: true,
    deps: featureEffects,
    useFactory: (...instances: any[]) => {
       return instances;
    },
  },

将导致错误：

Function expressions are not supported in decorators in 'EffectsModule' Consider changing the function expression into an exported function.

所以才会这样写：

providers: [
  featureEffects,
  {
     provide: FEATURE_EFFECTS,
     multi: true,
     deps: featureEffects,
     useFactory: createSourceInstances,
   },
],
...
export function createSourceInstances(...instances: any[]) {
  return instances;
}

并且我们可以成功获取这些实例inside the library:

@NgModule({})
export class EffectsFeatureModule {
  constructor(
    ...
    @Inject(FEATURE_EFFECTS) effectSourceGroups: any[][],
...

ngrx EffectsModule - 需要帮助了解提供者的使用情况

ngrx EffectsModule - Need assistance in understanding providers usage

angular

ngrx-effects