redux-observable - 在单个史诗中分派多个 redux 操作 [英] redux-observable - dispatch multiple redux actions in a single epic

问题描述

我正在寻找在 redux-observable 中间件的单个 Epic 中分派多个 redux 操作的方法.

I'm looking for way of dispatching multiple redux actions in a single Epic of redux-observable middleware.

假设我关注了 Epic.每当 SEARCH 事件发生时，Epic 从后端加载数据并分派 RESULTS_LOADED 动作.

Let's assume I have following Epic. Everytime when SEARCH event happens, Epic loads data from backend and dispatches RESULTS_LOADED action.

searchEpic = (action$) => 
    action$
    .ofType('SEARCH')
    .mergeMap(
        Observable
        .fromPromise(searchPromise)
        .map((data) => {
            return {
                type: 'RESULTS_LOADED',
                results: data
            }
        })
    )

现在，让我们假设在解析 searchPromise 时我需要分派额外的动作.

Now, let's assume that I need dispatch additional action when the searchPromise is resolved.

这样做的最简单方法似乎是使用第二个史诗来监听 RESULTS_LOADED 并调度第二个动作.像这样:

The simplest way of doing so seems to have a second epic that will listen to RESULTS_LOADED and dispatch the second action. Like so:

resultsLoadedEpic = (action$) => 
    action$
    .ofType('RESULTS_LOADED')
    .map(({results} => {
         return {
             type: 'MY_OTHER_ACTION',
             results
         } 
    })

在这个简单的例子中，这很容易.但是随着 Epics 的发展，我倾向于发现自己有很多 redux 操作，其唯一目的是触发其他操作.此外，一些 rxjs 代码需要重复.我觉得这有点难看.

In this simple example it's quite easy. But when Epics grow, I tend to find myself having a lot of redux actions which sole purpose is to trigger other actions. Additionally, some of the rxjs code needs to be repeated. I find this a bit ugly.

那么，我的问题是:有没有办法在单个 Epic 中分派多个 redux 操作?

So, my question: Is there a way to dispatch multiple redux actions in a single Epic?

推荐答案

没有要求您制定一对一的输入/输出比例.因此，如果需要，您可以使用 mergeMap(又名 flatMap)发出多个动作:

There is no requirement that you make a one-to-one in/out ratio. So you can emit multiple actions using mergeMap (aka flatMap) if you need to:

const loaded = (results) => ({type: 'RESULTS_LOADED', results});
const otherAction = (results) => ({type: 'MY_OTHER_ACTION', results});

searchEpic = (action$) => 
    action$
    .ofType('SEARCH')
    .mergeMap(
        Observable
        .fromPromise(searchPromise)
        // Flattens this into two events on every search
        .mergeMap((data) => Observable.of(
          loaded(data),
          otherAction(data))
        ))
    )

请注意，任何接受 Observable 的 Rx 运算符也可以接受 Promise、Array 或 Iterable；消费它们，就好像它们是流一样.所以我们可以使用数组来代替同样的效果:

Note that any Rx operator that accepts an Observable also can accept a Promise, Array, or Iterable; consuming them as-if they were streams. So we could use an array instead for the same effect:

.mergeMap((data) => [loaded(data), otherAction(data)])

您使用哪一种取决于您的个人风格偏好和用例.

Which one you use depends on your personal style preferences and use case.

这篇关于redux-observable - 在单个史诗中分派多个 redux 操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！