react - observable de redux: despacha múltiples acciones de redux en una sola epopeya

redux js ejemplos

Question

Estoy buscando la forma de enviar varias acciones de redux en una única Epic de middleware redux-observable de redux-observable .

Supongamos que tengo siguiendo Epic. Cada vez que ocurre el evento SEARCH , Epic carga datos desde el backend y envía la acción RESULTS_LOADED .

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

Ahora, supongamos que necesito enviar una acción adicional cuando se resuelva el searchPromise .

La forma más sencilla de hacerlo parece tener una segunda épica que escuchará a RESULTS_LOADED y enviará la segunda acción. Al igual que:

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

En este sencillo ejemplo es bastante fácil. Pero cuando las epopeyas crecen, tiendo a encontrar muchas acciones de redux cuyo único propósito es desencadenar otras acciones. Además, algunos de los códigos rxjs deben repetirse. Me parece un poco feo.

Entonces, mi pregunta: ¿hay una manera de enviar varias acciones de redux en una sola Epic?

Answer 1

No hay ningún requisito de hacer una relación de entrada / salida de uno a uno. Por lo tanto, puede emitir múltiples acciones utilizando mergeMap (también flatMap como flatMap ) si necesita:

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))
))
)

Tenga en cuenta que cualquier operador Rx que acepte un Observable también puede aceptar una Promesa, Array o Iterable; consumiéndolos como si fueran corrientes. Entonces podríamos usar una matriz para el mismo efecto:

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

El que use dependerá de sus preferencias personales de estilo y caso de uso.

Answer 2

O tal vez tienes tres acciones,

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};
}),
);
});