我们可以使用redux-batch-middleware和redux-observable吗?

时间:2017-11-07 20:37:03

标签: redux-observable

const fetchListEpic = (action$, store) =>
  action$.ofType('LOAD_LIST')
    .switchMap(() =>
      concat$(
        of$(openLoader()),
        fromPromise$(fetchListFromServer())
          .flatMap(list => of$(loadListSucceeded(list), closeLoader()))
          .catch(e =>
            of$(
              openSnackbar('ERROR'),
              closeLoader(),
            ),
        ),
     )
  );

此处loadListSucceededcloseLoader动作将逐一分派,这将导致多次重新呈现组件。

redus-observable是否也可以批处理多个动作?

更新

我们可以使用https://github.com/mrydengren/redux-batch-middleware吗? redux-batch-middleware需要一系列动作,但redux-observable仅适用于对象。

1 个答案:

答案 0 :(得分:1)

redux-batched-actions适用于redux-observable。这是一个演示,您可以在控制台中看到它只会重新渲染一次,尽管顺序有PONGSECOND_PONG

https://jsbin.com/kewomex/edit?js,console,output

根据您的修改和评论进行修改:

  

我们可以使用https://github.com/mrydengren/redux-batch-middleware吗? redux-batch-middleware需要一系列动作,但redux-observable仅适用于对象。

是的!实际上,您可以使用[几乎]任何带有redux-observable的中间件。 redux-observable本身对你的史诗发送的东西一无所知。它只是:

rootEpic(action$, store).subscribe(store.dispatch)

有了这些知识,接下来需要注意中间件是按照从左到右提供给applyMiddleware的顺序应用的。您可以将其视为store.dispatch传递给第一个中间件的任何内容,然后选择执行某些操作和/或将该操作传递给下一个中间件等。

因此,虽然redux-observable本身并不关心什么行为,但你的史诗可能会这样做。例如ofType运算符。这可能不会导致任何问题,因为如果调度的“操作”实际上是一系列操作,action.type将只是undefined并被ofType过滤掉而没有错误。无论如何,将redux-batch-middleware放在redux-observable之前可能是一个好主意,这样就可以消耗数组,并且每个内部动作都会在返回到你的史诗之前发出。这也意味着每个动作也可以由其他史诗处理,这很棒。

https://jsbin.com/yemixet/edit?js,console,output

import { batch, batching } from 'redux-batch-middleware';

const store = createStore(batching(rootReducer),
  applyMiddleware(batch, epicMiddleware)
);