Comparisons between redux-thunks, redux-sagas, and jumpsuit

async-actions-comparison.js

// Thunk

import { loading, setAll, error, loading} from 'actions/posts'

export refreshPosts () {
  return (dispatch) => {
    dispatch(loading(true))
    return Axios.get('posts')
      .then((res) => {
        dispatch(setAll(res.data))
      })
      .catch((err) => {
        dispatch(error('Network Error'))
      })
      .finally(() => {
        dispatch(loading(false))
      })
  }
}

// ------ VS -------

// Jumpstate

import Posts from 'state/posts'

export refreshPosts () {
  Posts.loading(true)
  return Axios.get('posts')
    .then((res) => {
      Posts.setAll(res.data)
    })
    .catch((err) => {
      Posts.error('Network Error')
    })
    .finally(() => {
      Posts.loading(false)
    })
}















// Saga

import { takeEvery, takeLatest } from 'redux-saga'
import { call, put } from 'redux-saga/effects'
import { loading, setAll, error, loading} from 'actions/posts'

export function* refreshPostsSaga() {
  yield* takeEvery("REFRESH_POSTS", fetchPosts);
}

function* fetchPosts() {
  yield put(loading(true))
  try {
    const { data } = yield call(Axios.get, 'posts')
    yield put(setAll(data))
  } catch (e) {
    yield put(error('Network Error'));
  }
  yield put(loading(false))
}

// ...

dispatch({type: 'REFRESH_POSTS'})


// ----- VS -------

// Jumpsuit Named-Effect

import { Effect } from 'jumpsuit'
import Posts from 'state/posts'

export Effect('REFRESH_POSTS', (payload) => {
  Posts.loading(true)
  return Axios.get('posts')
    .then((res) => {
      Posts.setAll(res.data)
    })
    .catch((err) => {
      Posts.error('Network Error')
    })
    .finally(() => {
      Posts.loading(false)
    })  
})

// ...

refreshPosts()














// Jumpsuit Generic Side-Effects

import { Effect } from 'jumpsuit'
import Analytics from 'state/analytics'

export Effect((action, getState) => {
  const { analytics } = getState()
  if (!analytics.ga) {
    Analytics.loadGA()
  }
})

// or 

import { Effect } from 'jumpsuit'
import Layout from 'state/layout'

export Effect((action, getState) => {
  const { auth } = getState()
  if (!auth.status) {
    Layout.showLogin(true)
  }
})