promiseMiddleware.js

/**
This middleware enhances redux-thunk, to deal with asynchronous actions

conventions and usage:
- an action is a plain object `{type: TYPE_CONSTANT, value: ANY_VALUE}` or an array of those actions (handled by reducer)
- you can shape action creators as `queryArgs => promise` (where the promise returns an action)
- or `queryArgs => action` (where the action value is a promise).

examples:
  const getProfile = id => ({ type: GET_PROFILE, value: fetchApi(`/profile/${id}`) });
  const getProfile = id =>  fetchApi(`/profile/${id}`).then(value => ({ type: GET_PROFILE, value }));
*/

export default function promiseMiddleware() {
  return next => async action => {
    if (typeof action.then === 'function') {
      return Promise.resolve(action)
        .then(next)
        .catch(e => {
          // handleErr(e.message, next);
          throw e;
        });
    } else if (action.value && typeof action.value.then === 'function') {
      return Promise.resolve(action.value)
        .then(value => {
          next({ type: action.type, value });
        })
        .catch(e => {
          // handleErr(e.message, next);
          throw e;
        });
    }
    // else, not a promise
    try {
      return next(action);
    } catch (e) {
      console.error(e);
      // handleErr(e.message, next);
    }
  };
}

~comparison-thunk-saga.md

Concurrent actions

• with saga: https://redux-saga.js.org/docs/advanced/Concurrency.html#takeevery
• with thunk:

const fetchCourse = (id, args) => fetchApi(`${courseEndpoint}/id`, args);
const fetchMetadata = args => fetchApi(metadataEndpoint, args);

const getAllCourseData = ({ id, tags }) => ({
  type: SET_DATA,
  value: Promise.all([fetchCourse(id), fetchMetadata(tags)])
    .then(([coursesData, tagsData]) => ({ courses: coursesData, metadata: tagsData }))
})

// or if you want to dispatch 2 different actions:
const getAllCourseData = ({ id, tags }) => Promise.all([
  fetchCourse(id).then(data =>({ type: SET_COURSE, value: data.course })),
  fetchMetadata(tags).then(data => ({ type: SET_METADATA, value: data.tags })),
]);

// which is more or less equivalent to:
const getAllCourseData = ({ id, tags }) => dispatch => Promise.all([
  fetchCourse(id).then(data => dispatch({ type: SET_COURSE, value: data.course })),
  fetchMetadata(tags).then(data => dispatch({ type: SET_METADATA, value: data.tags })),
]); // except this one dispatch those actions as early as possible

// for all those cases, it will error if one of the sub-promise errors

Cancel previous actions and use latest

• https://redux-saga.js.org/docs/advanced/Concurrency.html#takelatest + https://github.com/redux-saga/redux-saga/blob/master/docs/advanced/TaskCancellation.md
• with thunk:

let controller;

const myTask = args => dispatch => {
  if (controller) { // if a previous one exist, cancel it
    controller.abort();
  }
  controller = new AbortController();
  return fetchApi(endpoint, { ...args, signal: controller.signal })
    .then(data => dispatch({ type: MY_ACTION, value: data }));
};
// you could make any promise-based function abortable, not just this fetch wrapper

Sequential actions

• with saga https://redux-saga.js.org/docs/advanced/SequencingSagas.html
• with thunk:

const playLevelOne = () => value /*score or promise returning score*/;

const playLevelTwo = () => value /*score or promise returning score*/;

const playLevelThree = () => value /*score or promise returning score*/;

const game = () => dispatch => [playLevelOne, playLevelTwo, playLevelThree]
  .reduce(async (_, playLevel) => {
    await p;
    const value = await playLevel();
    dispatch({ type: SET_SCORE, value });
  }, Promise.resolve());

// or without await
const game = () => dispatch => [playLevelOne, playLevelTwo, playLevelThree]
  .reduce((p, playLevel) => {
    return p.then(playLevel).then(value => dispatch({ type: SET_SCORE, value }));
  }, Promise.resolve());

// both stop and throw the error as soon as an action throws