Question

我正在寻找在redux-observable中间件的单个Epic中调度多个redux动作的方法。

我们假设我有以下史诗。每次发生SEARCH事件时，Epic都会从后端加载数据并发送RESULTS_LOADED操作。

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

现在，我们假设我需要在searchPromise解决后再发送其他操作。

最简单的方法似乎是有第二个史诗会听RESULTS_LOADED并发出第二个动作。像这样：

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

在这个简单的例子中，它很容易。但是当Epics成长时，我倾向于发现自己有很多redux动作，其唯一目的是触发其他动作。此外，一些rxjs代码需要重复。我发现这有点难看。

所以，我的问题是：有没有办法在一个Epic中发送多个redux动作？

Answer 1

不要求您进行一对一的输入/输出比率。因此，如果您需要，可以使用mergeMap（又名flatMap）发出多个操作：

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;消费它们 - 如果它们是溪流。所以我们可以使用数组代替相同的效果：

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

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

Answer 2

或者您可能有三个动作，

API_REQUEST， API_RUNNING， API_SUCCESS，

searchEpic = (action$) => 
action$
.ofType('API_REQUEST')
.mergeMap((action) => {
   return concat(
       of({type: 'API_RUNNING'}),
       Observable.fromPromise(searchPromise)
        .map((data) => {
          return {type: 'API_SUCCESS', data}; 
        }),
    );
});

redux-observable - 在单个史诗中发送多个redux动作

2 个答案: