redux-observable 返回多种动作类型

Question

我正在使用 redux-observable，这就是我想要做的。

1. 当 'APPLY_SHOPPING_LIST' 的 actiontype 进入调度 'APPLYING_SHOPPING_LIST' 并在 5 秒后调度 'APPLIED_SHOPPING_LIST'。这是我目前想出的代码

   const applyingShoppingListSource = action$.ofType('APPLY_SHOPPING_LISTS').mapTo({ type: 'APPLYING_SHOPPING_LISTS' });
   
   const applyingShoppingListSourceOther = action$.ofType('APPLY_SHOPPING_LISTS').mapTo({ type: 'APPLIED_SHOPPING_LISTS' }).delay(5000);
   
   const concatList = applyingShoppingListSource.concat(applyingShoppingListSourceOther);
   

   返回连接列表；

现在的问题是只有 'APPLYING_SHOPPING_LISTS' 被触发，'APPLIED_SHOPPING_LISTS' 根本没有被触发到减速器。我在这里遗漏了什么吗？

补充一点，当我使用 flatMap 时，它可以工作，下面给出的是代码

 return action$.ofType('APPLY_SHOPPING_LISTS')
        .flatMap(() => Observable.concat(Observable.of({ type: 'APPLYING_SHOPPING_LISTS' }), Observable.of({ type: 'APPLYING_SHOPPING_LISTS' });

我很困惑这是如何工作的，而另一个则不是？

Answer 1

有几个问题。由于 Observables 是惰性的，因此您的第二个 action$.ofType('APPLY_SHOPPING_LISTS') for applyingShoppingListSourceOther 在第一个 applyingShoppingListSource 之后被连接，因此在第一个完成之前它不会监听 APPLY_SHOPPING_LISTS，但它永远不会实际完成，因为您正在采取所有匹配的操作，永远。

换句话说，你的代码是这样做的：

• 开始收听APPLY_SHOPPING_LISTS，收到后将其映射到APPLYING_SHOPPING_LISTS
• 当第一个 Observable 完成时（它永远不会）再次开始监听 APPLY_SHOPPING_LISTS，这一次当接收到时将其映射到 APPLIED_SHOPPING_LISTS，但在发出它之前等待 5000 毫秒。

您可以通过使用 .take(1) 或 .first()（同样的事情）来解决第一个未完成的特定问题，但您通常需要编写史诗以永不停止聆听，以便他们随时响应操作.

我想你想要的是这样的：

const exampleEpic = action$ =>
  action$.ofType('APPLY_SHOPPING_LISTS')
    .mergeMap(() =>
      Observable.of({ type: 'APPLYING_SHOPPING_LISTS' })
        .concat(
          Observable.of({ type: 'APPLIED_SHOPPING_LISTS' })
            .delay(5000)
        )
    );

我使用了mergeMap，但您可能希望使用switchMap 取消任何尚未发出的先前待处理的APPLIED_SHOPPING_LISTS。您的来电。