redux-obserwowalne - wywołaj wiele akcji redux w jednym eposie

Question

Szukam sposobu wysyłania wielu akcji redux w pojedynczym pakiecie oprogramowania pośredniego Epic z redux-observable.

Załóżmy, że podążam za Eposem. Za każdym razem, gdy wystąpi zdarzenie, Epic ładuje dane z backendu i wywołuje akcję .

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

Teraz załóżmy, że muszę wysyłki dodatkowe działania, gdy searchPromise został rozwiązany.

Najprostszy sposób zrobienia tego wydaje się mieć drugą epopeję, która będzie słuchać RESULTS_LOADED i wywołać drugą akcję. Podobnie jak:

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

W tym prostym przykładzie jest to dość łatwe. Ale kiedy Epics rośnie, staram się znaleźć wiele działań redux, których jedynym celem jest wywołanie innych działań. Dodatkowo część kodu rxjs musi zostać powtórzona. Uważam to za nieco brzydkie.

Moje pytanie: czy istnieje sposób na wysłanie wielu akcji redux w jednym epickim wydaniu?

Answer 1

Nie ma wymogu, aby utworzyć współczynnik proporcji jeden do jednego. Więc można emitować wiele działań z wykorzystaniem mergeMap (aka flatMap), jeśli chcesz:

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

Należy pamiętać, że każdy podmiot, który akceptuje Rx zauważalny również może przyjąć obietnicę, tablica lub iterable; pochłaniając je tak, jakby były strumieniami. Więc możemy używać tablicy zamiast z tego samego efektu:

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

który z nich korzystać, zależy od osobistych preferencji i stylu przypadku użycia.