withLatestFrom 使用两个 Redux 操作答案

【问题标题】：withLatestFrom using two Redux actionswithLatestFrom 使用两个 Redux 操作
【发布时间】：2018-11-25 19:35:06
【问题描述】：

我一直在尝试将 rxjs 与 Redux observable 和 Redux 操作一起正确使用。我尝试了许多不同的调用以下函数的组合，每种可能的组合都给了我不同的错误。

基本上，我有两个可以在我的应用程序中调度的操作：SET_CIRCULAR_DATA 和 SET_MODAL_OVER_DEEP_LINK_FLAG。

我想要发送另一个动作，determineFoundInProducts() 当SET_MODAL_OVER_DEEP_LINK_FLAG 发生时，然后是第一个（成功的）SET_CIRCULAR_DATA 动作。任何后续的SET_CIRCULAR_DATA 操作都应该被忽略，直到SET_MODAL_OVER_DEEP_LINK_FLAG 再次发生。由于这种需要，我觉得withLatestFrom() 最有意义。我还认为takeUntil() 和repeat() 可能有助于帮助我完成我需要的事情，尽管我没有将它们包含在这个代码示例中，因为我被困在withLatestFrom() 部分。

我尝试了不同的管道组合，而不是管道，使用 switchMap、map、mapTo，但似乎没有任何效果。我正在导入所有使用过的 rxjs 函数，并且我在根目录中结合了史诗，所以不可能是这样。我似乎无法获得正确的组合来避免出错。

一些错误示例是

动作必须是普通对象。使用自定义中间件进行异步操作。
您在预期流的位置提供了“未定义”

我正在使用 RXJS ^5.5.6 和 Redux Observable ^0.17.0。

import 'rxjs';
import { Observable } from 'rxjs/Observable';
import { withLatestFrom, map, tap, mergeMap } from 'rxjs/operators';
import ....all the types and actions

export const handleProductDetailsModalOnLoginRedirect = (action) =>
  action.ofType(weeklyAdTypes.types.SET_CIRCULAR_DATA).pipe(
    withLatestFrom(
      action.ofType(navigationTypes.types.SET_MODAL_OVER_DEEP_LINK_FLAG)
    ),
    mergeMap(([first, second]) => {
      console.log(first, second);
      return determineFoundInProducts();
    })
  );

编辑

我在原来的帖子中苦苦挣扎，以确定代码的哪一部分被破坏了。我遇到的问题是 redux 可观察操作无法与 rxjs 函数通信。我发现管道适当地通过管道（双关语）使操作可以与 rxjs 函数一起使用。这就是我所做的。

action.ofType(navigationTypes.types.INIT_REDIRECT_MODAL_LOGIC)
  .switchMap(() =>
    action.ofType(weeklyAdTypes.types.SET_CIRCULAR_DATA)
    .withLatestFrom(action.ofType(navigationTypes.types.SET_MODAL_OVER_DEEP_LINK_FLAG))
      .take(1)
      .pipe(
        map(([first]) => {
         // Do stuff
         return determineFoundInProducts();
      }))
    )

【问题讨论】：

标签： rxjs redux-observable

【解决方案1】：

答案取决于如果在任何 SET_CIRCULAR_DATA 操作之前调度多个 SET_MODAL_OVER_DEEP_LINK_FLAG 操作，您希望发生什么，以及它们是否应该以某种方式与某种唯一 ID 配对。

听起来您很可能正在寻找exhaustMap。

exhaustMap 运算符基本上是switchMap 的相反行为。它将输入映射到内部 observable 并展平其输出，忽略其他输入值直到该 observable 完成。它耗尽内部 Observable。

在您的用例中，这意味着我们首先侦听SET_MODAL_OVER_DEEP_LINK_FLAG，然后侦听单个SET_CIRCULAR_DATA，但在等待后续SET_CIRCULAR_DATA 时，我们会忽略所有可能传入的SET_MODAL_OVER_DEEP_LINK_FLAG 操作。请注意，take(1) 很重要，否则我们将监听每个 SET_CIRCULAR_DATA 的流，而不仅仅是一个。

export const handleProductDetailsModalOnLoginRedirect = (action) =>
  action.ofType(navigationTypes.types.SET_MODAL_OVER_DEEP_LINK_FLAG)
    .exhaustMap(() => 
      action.ofType(weeklyAdTypes.types.SET_CIRCULAR_DATA)
        .take(1)
        .map(() => determineFoundInProducts())
    );

顺便说一句，问 Redux Observable 问题实际上只是 RxJS 问题是很常见的。这是一件很酷的事情，因为 RxJS 社区是庞大的，所以你会在上面找到更多的资源，如果你能够改写问题，就有更好的机会获得帮助与 Redux Observable 无关——例如将ofType('TYPE') 更改为filter(d => d.type === 'TYPE')

【讨论】：

感谢您的帮助。这确实有帮助，尽管我被卡住的地方是 action.ofType(weeklyAdTypes.types.SET_CIRCULAR_DATA) 不是映射。我需要对 redux observable 进行管道传输，否则它会给我带来错误。我会在我原来的帖子中更新。

【解决方案2】：

以上答案肯定会对其他人有所帮助。然而，我一直在努力让 redux observable action 与 RXJS 函数进行通信。请参阅我对原始帖子的编辑以获取解决方案。

【讨论】：