Question

我有一个包含多个功能模块的Angular 5应用程序。每个模块负责特定页面的资产并被延迟加载。

src/
|--app/
   |--core/ <-- core functionality here
   |--landing/
   |--store/
   |--about-us/

对于每个模块，我都有顶层页面组件，该组件连接到商店并以非常相似的方式跨页面获取数据。

landing.component.ts

this.store.pipe(select(getDataForThisPage));
...
this.store.dispatch(new PageAction.FetchData());

因此，每个页面组件都从后端获取数据并将其放入自己的功能存储中。

这里的问题是，对于所有功能模块，a）动作，b）效果，甚至减速器形状都非常相似。因此，理想情况下，我希望至少重复使用动作，但是如果可能的话，也可以存储/存储动作。

最好的方法是什么？

Answer 1

看看@ngrx/entity。

如果您想自己做类似的事情，则可以定义一个接口，该接口定义了如何在您的状态下存储数据。您可以使用通用参数为实际的“实体”提供类型安全。您可以创建将实体名称作为输入的辅助函数，然后创建动作和化简器，其中动作以您的实体名称作为前缀。

但是在自己尝试之前，我会先尝试@ ngrx / entity，以便您对可能的想法有所了解。

Answer 2

对于动作，我想您可以使用某种继承来扩展带有有效负载的动作。

对您来说更有用，在RxJ中，您可以创建自定义运算符以对常用操作进行功能化。例如：

import { tap } from 'rxjs/operators'
import { Observable } from 'rxjs'

export const customLog = <T>(debug) => {
  return (source: Observable<T>) => source.pipe(
    tap((value) => { debug(value) })
  )
}

您可以像这样使用此自定义运算符：

@Effect()
  appInit$ = this.actions$.pipe(
    ofType<InitAction>(InitActionTypes.Init),
    customLog(debug),
    // etc
  )

很显然，自定义过滤器管道中的逻辑可能要复杂得多。

ngrx：在多个功能模块之间创建可重复使用的操作

2 个答案: