根据有效载荷延迟史诗般的动作

Question

根据 documentation 在 observable 中延迟动作非常简单：

const pingEpic = action$ =>
  action$.ofType('PING')
    .delay(1000) // Asynchronously wait 1000ms then continue
    .mapTo({ type: 'PONG' });

但我想根据操作负载中的某些值延迟操作。例如像这样的东西（什么不起作用）：

const pingEpic = action$ =>
  action$.ofType('PING')
    .delay(action => action.payload.delayTime) // Asynchronously wait the time defined within the action then continue
    .mapTo({ type: 'PONG' });

不幸的是 .delay() 只需要一个简单的静态值，我不知道如何从操作中设置值。有人有什么想法吗？

为什么我需要它？

此行为背后的原因是，我在我的史诗中调用了 REST API，它在后端创建了一个新项目。当这个调用 returns 我将触发两个动作（通过 flatMap）。一个成功的操作让 reducer 更新相应的状态，第二个操作获取后端所有可用项目的列表。不幸的是后端有点慢（我无法控制它），因此立即获取所有项目的调用 returns 没有新创建的项目的列表。 500 毫秒后执行相同的调用 returns 任何预期的事情。因为这个 "get the whole list request" 与第一次显示页面时完全一样，我不喜欢所有请求都有这种延迟，但只有在创建调用后触发时才会延迟。所以我的想法是向动作添加一个延迟参数（默认值为零），然后从史诗中考虑。

如果没有人能告诉我如何从动作中获得延迟，第二种可能性是使用不同的动作，让另一个史诗简单地监听并使用某种 hard-coded 延迟，但它会是如果我可以通过相同的操作对其进行参数化，那就太棒了。

Answer 1

您可以使用 delayWhen 执行此操作，但它有点笨拙（它的工作方式类似于 takeUntil）：

const pingEpic = action$ => action$.ofType('PING')
  .delayWhen(({ payload: { delayTime }}) => Observable.timer(delayTime)) 
  .mapTo({ type: 'PONG' });

所以 delayWhen 会延迟你原来的 Observable 直到回调函数返回的 Observable 发出一些东西。然后它恢复原来的 Observable，所以如果你有一个 map 而不是 mapTo 之后，你可以映射到原来的 action/payload/whatever.

根据有效载荷延迟史诗般的动作

Delay epic action depending on payload

angular

angular-redux

为什么我需要它？