Rxjs WithLatest从使用两个Redux操作开始_Rxjs_Redux Observable

Rxjs WithLatest从使用两个Redux操作开始

rxjs

Rxjs WithLatest从使用两个Redux操作开始,rxjs,redux-observable,Rxjs,Redux Observable,我一直在尝试将rxjs与Redux observable和Redux操作一起正确使用。我尝试过调用以下函数的多种不同组合，每种可能的组合都会给我带来不同的错误基本上，我有两个动作可以在我的应用程序中调度：SET\u CIRCULAR\u DATA和SET\u model\u OVER\u DEEP\u LINK\u FLAG 我想调度另一个操作，determinefoundnproducts（）当SET\u model\u OVER\u DEEP\u LINK\u FLAG发生后，第一个（成功

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

基本上，我有两个动作可以在我的应用程序中调度：

SET\u CIRCULAR\u DATA

和

SET\u model\u OVER\u DEEP\u LINK\u FLAG

我想调度另一个操作，

determinefoundnproducts（）

当

SET\u model\u OVER\u DEEP\u LINK\u FLAG

发生后，第一个（成功的）

SET\u循环数据

操作。在再次出现

SET\u model\u OVER\u DEEP\u LINK\u FLAG

之前，应忽略任何后续的

SET\u CIRCULAR\u DATA

操作。由于这种需要，我觉得

with latestfrom（）

最有意义。我还认为

takeUntil（）

和

repeat（）

可能有助于帮助我完成我需要的任务，尽管我没有将它们包括在这个代码示例中，因为我被困在

withLatestFrom（）

部分

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

以下是一些错误示例：

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

我使用的是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();
      }))
    )

答案取决于如果在执行任何

SET\u CIRCULAR\u DATA

操作之前调度多个

SET\u model\u OVER\u DEEP\u LINK\u FLAG

操作，您希望发生什么，以及它们是否应该与某种唯一ID配对

听起来很有可能您正在寻找

排气图

exhaustMap

操作符基本上与

switchMap

的行为相反。它将输入映射到内部可观察对象并将其输出展平，忽略其他输入值，直到该可观察对象完成。它耗尽内部可观察对象

在您的用例中，这意味着我们首先侦听

SET\u model\u OVER\u DEEP\u LINK\u FLAG

，然后侦听单个

SET\u CIRCULAR\u DATA

，但在等待后续的

SET\u CIRCULAR\u DATA

时，我们忽略所有可能传入的

SET\u model\u OVER\u DEEP\u LINK\u FLAG

操作。请注意，

take（1）

非常重要，否则我们将侦听每个

SET\u循环\u数据流，而不仅仅是一个
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可观察的问题是很常见的，实际上只是RxJS问题。这是一件很酷的事情，因为RxJS社区规模很大，所以你可以在上面找到更多的资源，如果你能够将问题重新表述为不知道可观察到的Redux，那么你就有更好的机会获得帮助——例如，将类型（'TYPE'）

更改为

过滤器（d=>d.TYPE='TYPE'））