我们可以使用redux

我们可以使用redux-batch-middleware和redux-observable吗？(Can we use redux-batch-middleware with 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(), ), ), ) );

这里将loadListSucceeded调度loadListSucceeded和closeLoader动作，这将导致多次重新呈现组件。

redus-observable可以批量执行多个操作吗？

---

更新：

我们可以使用https://github.com/mrydengren/redux-batch-middleware吗？ redux-batch-middleware需要动作数组，但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(), ), ), ) );

Here loadListSucceeded and closeLoader actions will be dispatched one by one which will result in multiple re-rendering of components.

Is it also possible with redus-observable to batch multiple actions?

---

UPDATE:

Can we use https://github.com/mrydengren/redux-batch-middleware? The redux-batch-middleware expects array of actions but redux-observable works only for objects.

最满意答案

redux-batched-actions与redux-observable可以很好地协作。 这是一个演示，您可以在控制台中看到，尽管按顺序存在PONG和SECOND_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”实际上是一个action数组， action.type将仅仅是undefined并且被ofType过滤掉而没有错误。 无论如何，在redux-observable之前放置redux-batch-middleware可能是一个好主意，所以数组被消耗，并且每个内部操作在发送回你的史诗之前发出。 这也意味着每个动作也可以由其他史诗处理，这很棒。

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

import { batch, batching } from 'redux-batch-middleware'; const store = createStore(batching(rootReducer), applyMiddleware(batch, epicMiddleware) );

redux-batched-actions works well with redux-observable. Here's a demo, where you can see in the console that it only rerenders once despite there being PONG and SECOND_PONG sequentially:

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

---

Edit, based on your edits and comments:

Can we use https://github.com/mrydengren/redux-batch-middleware? The redux-batch-middleware expects array of actions but redux-observable works only for objects.

Yep! In fact, you can use [nearly] any middleware with redux-observable. redux-observable itself doesn't know anything about the things your epics dispatch. It just does:

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

Armed that knowledge, you next need to be mindful that middleware is applied in the order provided to applyMiddleware from left to right. You can think of it as store.dispatch passes whatever was dispatched to the first middleware, which then chooses to do something and/or then pass that action along to the next middleware, etc.

So while redux-observable itself doesn't care what actions look like, your epics probably do. e.g. the ofType operator does. This might not cause any issues since if the "action" that was dispatched is actually an array of actions, action.type will just be undefined and be filtered out by ofType without errors. Regardless, probably a good idea to put redux-batch-middleware before redux-observable so the arrays are consumed and each inside action emitted before being given back to your epics. This also means that each of those actions could also be handled by other epics too, which is awesome.

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

import { batch, batching } from 'redux-batch-middleware'; const store = createStore(batching(rootReducer), applyMiddleware(batch, epicMiddleware) );