Managing application state asynchronously

Redux

JavaScript library designed for managing application state

Redux/State

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Redux/Action

{
    type: 'ADD_TODO',
    text: 'Go to swimming pool'
}

{
    type: 'TOGGLE_TODO',
    index: 1
}

{
    type: 'SET_VISIBILITY_FILTER',
    filter: 'SHOW_ALL'
}

Redux/Reducer

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([{ text: action.text, completed: false }])
    case 'TOGGLE_TODO':
      return state.map(
        (todo, index) =>
          action.index === index
            ? { text: todo.text, completed: !todo.completed }
            : todo
      )
    default:
      return state
  }
}

Problems

function fetchData(someValue) {
    return (dispatch, getState) => {
        dispatch({type : "REQUEST_STARTED"});
 
        myAjaxLib.post("/someEndpoint", {data : someValue})
            .then(res => dispatch({type : "REQUEST_SUCCEEDED", payload : res})
            .catch(error => dispatch({type : "REQUEST_FAILED", error});    
    };
}

RxJS

Library for

reactive programming

*Lodash for async

Reactive

Declarative programming paradigm concerned with data streams

Observable/Observer

const source = Rx.Observable.create(observer => {
  // Yield a single value and complete
  observer.next(42);
  observer.complete();

  // Any cleanup logic might go here
  return () => console.log('disposed')
});

const subscription = source.subscribe(
  x => console.log('onNext: %s', x),
  e => console.log('onError: %s', e),
  () => console.log('onCompleted'));

// => next: 42
// => completed

subscription.unsubscribe();
// => disposed

redux-observable

Epic/cancellation

import { ajax } from 'rxjs/observable/dom/ajax';

const fetchUserEpic = action$ =>
  action$.ofType(FETCH_USER)
    .mergeMap(action =>
      ajax.getJSON(`/api/users/${action.payload}`)
        .map(response => fetchUserFulfilled(response))
        .takeUntil(action$.ofType(FETCH_USER_CANCELLED))
    );

// epic(action$, store).subscribe(store.dispatch)