Redux: Is there any standard implementation or library for keeping track of the status of an async request?

Question

In redux async actions in the docs the state of an async request is kept as a property isFetching in the state container for various objects:

{
  selectedSubreddit: 'frontend',
  postsBySubreddit: {
    frontend: {
      isFetching: true,
      didInvalidate: false,
      items: []
    },
    reactjs: {
      isFetching: false,
      ...

This works fine however I'm looking to build out my application and I'm looking for design patterns that will scale up across multiple objects that must be kept in my state container and synchronized with my api. So I'm looking for standards or libraries that the redux community have adopted.

I found the Flux Standard Action which looks quite reasonable but this is more a standardization of how to handle payloads and errors, not the status of an async request.

Is there any library or pattern that a lot of redux developers are working with? I would think there might be something like { success, isFetching, error }.

Answer 1

Take a look at this library, use it like you want.

In my app I have use it like that, first you add it to your middleware in the store configuration. After this one you setup your action to be a promise and the payload is the promise.

export const reqAllGames = games => {

  const promise = new Promise((resolve, reject) => {
    request
      .get(`${config.ROOT_URL}/${config.API_KEY}`)
      .end((err, res) => {
        if (err) {
          reject(err);
        } else {
          resolve(res.body.top);
        }
      });
  });

  return {
    type:    types.RECEIVE_ALL_GAMES,
    payload: promise
  };

};

After your can setup your reducer like:

const gameReducer = (games = { isFetched: false }, action) => {

  switch (action.type) {
    case `${types.RECEIVE_ALL_GAMES}_PENDING`:
      return {};
    case `${types.RECEIVE_ALL_GAMES}_FULFILLED`:
      return {
        games:     action.payload,
        err:       null,
        isFetched: true
      };
    case `${types.RECEIVE_ALL_GAMES}_REJECTED`:
      return {
        games:     null,
        err:       action.payload,
        isFetched: true
      };
    default:
      return games;
  }

};

Hope that can help ;)