Handling Redux Side Effects with redux-observable


To handle Redux side effects, I (and others) prefer to writing sagas with redux-saga .

After @duivvv mentioned it to me on Twitter redux-observable also caught my eye. At the core site RxJS 5 and the concept of Epics which take a stream of actions and return a stream of actions. The library is used extensively over at Netflix where it was created by Jay Phelps and (now Googler) Ben Lesh.

Here’s an example Epic which listens for a SEARCH action, and then actually performs the actual search (until it is cancelled):

const searchEpic = (action$, store) =>
  action$.ofType('SEARCH')
    .map(action => action.payload)
    .debounceTime(400)
    .switchMap(query => 
      ajax.post('http://localhost:8080/search', {query})
        .takeUntil(action$.ofType('CANCEL_SEARCH')))
    .map(res => ({type: 'SEARCH_DATA', result: res.response}))

💁‍♂️ If you’re entirely not familiar with RxJS then watch this ”RxJS Observables Crash Course” video

Next to some proper documentation there’s also a good introductory video available:

redux-observable
Understanding RxJS and Redux-Observable →

Related: Using RxJS and CSS Variables it’s very easy to create “Reactive Animations”

Elsewhere , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *