withLatestFrom 使用两个 Redux 操作

Question

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

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

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

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

一些错误示例是

动作必须简单objects。使用自定义中间件进行异步操作。
您提供了 'undefined' 预期流的位置

我正在使用 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();
    })
  );

编辑

我在原来的 post 中苦苦挣扎，以确定代码的哪一部分被破坏了。我遇到的麻烦是 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();
      }))
    )

Answer 1

答案取决于如果在任何 SET_CIRCULAR_DATA 动作之前分派多个 SET_MODAL_OVER_DEEP_LINK_FLAG 动作，你希望发生什么，以及它们是否应该如何与某种独特的配对在一起有无身份证

听起来您很可能在寻找 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')

Answer 2

以上回答一定会对其他人有所帮助。然而，我正在努力解决的问题是让 redux 可观察操作与 RXJS 函数进行通信。请参阅我对原始 post 的编辑以获取解决方案。

withLatestFrom 使用两个 Redux 操作

withLatestFrom using two Redux actions

rxjs

redux-observable

编辑