先研究標準的 effect 為何可以被 call 到：在 ProductReviewsEffects 建構函式里設定斷點：

![](https://img-blog.csdnimg.cn/img_convert/519d1507b4a346fc2b2633e3f58bd6ff.png)

發現在訪問首頁時，斷點即觸發。
![](https://img-blog.csdnimg.cn/img_convert/e5404bc435aa77eaadf7a574e016ffa7.png)

為什麼 AppModule 啟動時，就要載入 ProductReviewEffect?
![](https://img-blog.csdnimg.cn/img_convert/fce8d62c84e7c3d70281f4e8ef7edb46.png)

單擊 AppModule，就跳轉到我自定義的 AppModule 檔案了，但是該檔案裡並沒有 ProductReviewEffect：
![](https://img-blog.csdnimg.cn/img_convert/1f30392049ff06a395b23227c5bcebb7.png)

這個 EffectFeatureModule 是標準框架的實現：
![](https://img-blog.csdnimg.cn/img_convert/c6457c1ae06737dc08d00b5b210a6d17.png)

Spartacus 所有標準的 Effects 例項，都是在下列程式碼 ngrx-effects.js 裡例項化的：

![](https://img-blog.csdnimg.cn/img_convert/25d7690c35e953471b3d06ec3022cd92.png)

```typescript
function createEffects(injector, effectGroups, userProvidedEffectGroups) {
    /** @type {?} */
    const mergedEffects = [];
    for (let effectGroup of effectGroups) {
        mergedEffects.push(...effectGroup);
    }
    for (let userProvidedEffectGroup of userProvidedEffectGroups) {
        mergedEffects.push(...userProvidedEffectGroup);
    }
    return createEffectInstances(injector, mergedEffects);
}
```
![](https://img-blog.csdnimg.cn/img_convert/aa58b2c7494b30dc068fe977c50bff61.png)

問題就是，對於 AppModule 而言，這些 Effects 是從哪裡解析出來的？

![](https://img-blog.csdnimg.cn/img_convert/3b92b5cccebdb8a788cd901edae088c3.png)

看一下標準的 Effects 是怎麼做的？

![](https://img-blog.csdnimg.cn/img_convert/a7332cbea66f17134d3520cb55a413f1.png)

![](https://img-blog.csdnimg.cn/img_convert/3e077fcee1136b3d320a10b8bd9c9569.png)

```typescript
export const effects: any[] = [
  ProductsSearchEffects,
  ProductEffects,
  ProductReviewsEffects,
  ProductReferencesEffects,
];
EffectsModule.forFeature(effects),
```

# 解決方案

![](https://img-blog.csdnimg.cn/img_convert/9b7af4e86a9afe3fda9d025095b7963b.png)

![](https://img-blog.csdnimg.cn/img_convert/04d112bbef07fcfdb19ff95638778eee.png)

最後，生效了：
![](https://img-blog.csdnimg.cn/img_convert/05c6d69db3dcf50a61127d72e8f6ef89.png)

SAP Spartacus 標準的 Effects 實現的注入原理

相關文章