ngrx - @ngrx/Store 如何用于缓存？

Question

ngrx 的支持者声称 (here for example)，您可以并且应该将所有应用程序状态保存在单个 Store 中。这表明 @ngrx/Store 可以用于缓存，因为缓存的内容是一种应用程序状态。

Web 应用程序中的缓存是一种在有数据时返回数据，并在没有数据时封装从服务器请求数据的东西。 Wikipedia article on caching当数据可用时称为缓存命中，当数据不可用时称为缓存未命中。

从函数式编程的角度来看，我们可以立即看到从缓存中读取数据在功能上是不纯的——它有一个副作用，即数据可能会从服务器请求并保留在缓存中。我不知道如何使用 ngrx 来做到这一点，例如，它要求其选择器在功能上是纯的。

考虑这个 Caching With RxJs Observables in Angular 可能会有所帮助教程(据说 rxjs 是对 ngrx 的极大补充)。我们不必滚动很远就能找到 getFriends()具有副作用的功能完成:

getFriends() {

  if(!this._friends){

    this._friends = this._http.get('./components/rxjs-caching/friends.json')
                        .map((res:Response) => res.json().friends)
                        .publishReplay(1)
                        .refCount();
  }

  return this._friends;
}

此外，商店的内容似乎对整个应用程序都是普遍可用的。唯一的控制是关于如何更新状态，但是在缓存的原始数据中随意浏览是愚蠢的，因为无法保证哪些缓存项可用，哪些不可用。

希望这些担忧可以得到缓解，并且有一种我错过的方法。请问你能告诉我一个使用@ngrx/Store 作为缓存的好方法吗？

Answer 1

你可以这样做

friends$ = createEffect (() =>{
  this.actions$.pipe(
   .ofType(ListActions.LOAD)
   .withLatestFrom(
     this.store.select(fromSelectors.loadedList),    
     (action: fromList.Load, store: fromList.State) => store.friends
   )
  .switchMap((friends: Friend[]) => {

    if (friends) {
      return [new ListActions.Loaded(friends)];
    }

    return this.http
      .get('/friendApi')
      .map((friends: Friend[]) => new ListActions.Loaded(friends))
      .catch(err => Observable.of(new ListActions.Failed()));
   });
}

使用 ‘withLatestFrom’ 操作符，我们通过 dispatched Action 将存储(加载列表)状态变为我们的效果，并检查列表是否已填充；调度现有列表，否则进行其余调用并在 reducer 中更新我们的存储。
详细答案请引用 this Medium post