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