ngrx 异步元减速器答案

【问题标题】：ngrx asynchronous meta reducerngrx 异步元减速器
【发布时间】：2019-03-24 00:38:19
【问题描述】：

我有一个 ngrx 元减速器，它可以像这样调整动作的有效负载：

export function doSomething(reducer) {
  return (state, action) => {
    action.payload = 'fred'
    return reducer(state, action)
  }
}

export const metaReducers: MetaReducer<State>[] = [doSomething]

这很好用。但是，我希望负载由异步 HTTP 请求的响应确定。像这样的：

export function doSomething(reducer) {
  return (state, action) => {
    // ASSUME THE HTTP SERVICE IS AVAILABLE AS MAKING THE HTTP SERVICE AVAILABLE IS NOT A PROBLEM (trying to keep the code simple for illustration)
    this.http.get('/some/data').subscribe((res) => {
      action.payload = res.data
      return reducer(state, action)
    })
  }
}

但这不起作用。任何人都知道如何实现这一目标？谢谢

【问题讨论】：

这不就是特效的用途吗？
是的，但我想要一些通用的东西，所有动作都会触发，而不必为每个动作编写效果 - 或者你的问题可能有帮助 - 如果我不使用 ofType 过滤器，它可能只是工作
我很想知道这是否适合你。
我在这里提出了一个关于这个问题的功能请求github.com/ngrx/platform/issues/1649 - 它已经相当突然地关闭了，但已经请求重新打开它
是的，我也想要这个。即使用离子存储本地存储到 SQLite，这是异步的（在 SQLite 可用的设备上运行时）

标签： angular ngrx

【解决方案1】：

对此解决方案不满意，但它是一种解决方法。如果有人知道如何编写异步元减速器，我会更高兴:)

对于类型以“Requested”结尾的任何触发操作，此代码会发出 HTTP 请求，然后触发“Loaded”操作以使用 HTTP 响应填充存储。

例如，如果我派遣：

动作“[Anything] Potatoes Requested”

它将发出 HTTP 请求：

HTTP GET /anything-potatoes-requested

然后会得到响应并调度：

操作“[Anything] Potatoes Loaded”用响应填充商店。

这意味着后端数据直接进入存储，我不需要为每个“请求”操作编写@Effect。

如果可以使用异步元减速器，这会简单得多，因为那时我不需要“加载”操作，但可以在原始“请求”操作的负载到达减速器之前修改它。

这是主要的sn-p代码：

@Effect()
requested$ = this.actions$.pipe(
  filter(action => action.type.endsWith('Requested')),
  map(action => ({
    action,
    path: getActionHttpPath(action),
    loadedAction: getLoadedAction(action)
  })),
  filter(obj => obj.loadedAction != null),
  tap(obj => debug('HTTP GET', obj.path)),
  mergeMap((obj) =>
    this.http.get(obj.path).pipe(
      map(res => ({...obj, res})),
      catchError(() => {
        return of({...obj, res: null})
      })
    )
  ),
  filter(obj => obj.res != null),
  map(obj => new obj.loadedAction(obj.res))
)

【讨论】：