Spinner Loading in Redux

Question

What is the ideal way of doing some sort of spinning indicator in Redux?

Lets say I have a REST API called Things. In the React components I have Thing Card, Thing Card List, and Add Thing Form.

What is the ideal way if I want to spin a spinner everytime I do: *) GET Things from server *) PUT Thing/123 to server *) DELETe Thing/123 from server *) POST Thing to server

I know the idea is pretty much set a state called isPending: true in Redux Store.

This is what I have

store = {
  things: {
     data: [], // array of things
     isPending: true,
     isSuccess: false,
     isError: false,
     error: undefined
  }
};

However, this isPending: true is for what action? GET? PUT? DELETE? POST? If I make all of those action relies on the that same property isPending: true then weird things start happening such as => When I do a POST Things, the isPending is true for a moment, and other components that relies on that property are showing their spinner too.

Here is my code

import _ from 'lodash';
import Api from '../../utils/api';

export const thingApi = new Api({ 
  url: '/api/things',
  token: localStorage.getItem('token')
});

// ------------------------------------
// Constants
// ------------------------------------
export const GET_THING_PENDING = 'GET_THING_PENDING';
export const GET_THING_SUCCESS = 'GET_THING_SUCCESS';
export const GET_THING_FAILURE = 'GET_THING_FAILURE';
export const POST_THING_PENDING = 'POST_THING_PENDING';
export const POST_THING_SUCCESS = 'POST_THING_SUCCESS';
export const POST_THING_FAILURE = 'POST_THING_FAILURE';
export const DELETE_THING_PENDING = 'DELETE_THING_PENDING';
export const DELETE_THING_SUCCESS = 'DELETE_THING_SUCCESS';
export const DELETE_THING_FAILURE = 'DELETE_THING_FAILURE';

// ------------------------------------
// Actions
// ------------------------------------
export const getThing = () => {
  return (dispatch, getState) => {
    dispatch(getThingPending());
    return thingApi.get()
      .then(({ data }) => {
        dispatch(getThingSuccess(data));
      })
      .catch(({ error }) => {
        dispatch(getThingFailure(error));
      });
  };
};

export const postThing = ({ name }) => {
  return (dispatch, getState) => {
    dispatch(postThingPending());
    const body = { name };
    return thingApi.post({ data: body })
      .then(({ data }) => {
        dispatch(postThingSuccess(data));
      })
      .catch(({ error }) => {
        dispatch(postThingFailure(error));
      });
  };
};

export const deleteThing = (_id) => {
  return (dispatch, getState) => {
    dispatch(deleteThingPending());
    return thingApi.delete({ 
      url: `/api/things/${_id}`
    }).then((res) => {
        dispatch(deleteThingSuccess(_id));
      })
      .catch(({ error }) => {
        dispatch(deleteThingPending(error));
      });
  };
};

export const getThingPending = () => ({
  type: GET_THING_PENDING
});

export const getThingSuccess = (things) => ({
  type: GET_THING_SUCCESS,
  payload: things
});

export const getThingFailure = (error) => ({
  type: GET_THING_FAILURE,
  payload: error
});

export const postThingPending = () => ({
  type: POST_THING_PENDING
});

export const postThingSuccess = (thing) => ({
  type: POST_THING_SUCCESS,
  payload: thing
});

export const postThingFailure = (error) => ({
  type: POST_THING_FAILURE,
  payload: error
});

export const deleteThingPending = () => ({
  type: DELETE_THING_PENDING 
});

export const deleteThingSuccess = (_id) => ({
  type: DELETE_THING_SUCCESS,
  payload: _id
});

export const deleteThingFailure = (error) => ({
  type: DELETE_THING_FAILURE,
  payload: error
});

export const actions = {
  getThing,
  getThingSuccess,
  postThing,
  postThingSuccess,
  deleteThing,
  deleteThingSuccess
};

// ------------------------------------
// Action Handlers
// ------------------------------------
const ACTION_HANDLERS = {
  [GET_THING_PENDING] (state, action) {
    return { 
      isPending: true,
      isSuccess: false,
      isFailure: false
    };
  },

  [GET_THING_SUCCESS] (state, { payload: data }) {
    return {
      isPending: false,
      isSuccess: true,
      data,
      isFailure: false
    };
  },

  [GET_THING_FAILURE] (state, { payload: error }) {
    return { 
      isPending: false,
      isSuccess: false,
      isFailure: true,
      error
    };
  },

  [POST_THING_PENDING] (state, action) {
    return {
      isPending: true,
      isSuccess: false,
      isError: false
    };
  },

  [POST_THING_SUCCESS] (state, { payload: data }) {
    debugger;
    return {
      isPending: false,
      isSuccess: true,
      data: [ ...state.data, data ],
      isError: false
    };
  },

  [POST_THING_FAILURE] (state, { payload: error }) {
    return {
      isPending: false,
      isSuccess: false,
      isFailure: true,
      error
    };
  },

  [DELETE_THING_PENDING] (state, action) {
    return {
      ...state,
      isPending: true,
      isSuccess: false,
      isFailure: false
    };
  },

  [DELETE_THING_SUCCESS] ({ data }, { payload: _id }) {
    const index = _.findIndex(data, (d) => d._id === _id);

    const newData = [
      ...data.slice(0, index),
      ...data.slice(index + 1)
    ];

    return {
      isPending: false,
      isSuccess: true,
      data: newData,
      isFailure: false
    };
  },

  [DELETE_THING_FAILURE] (state, { payload: error }) {
    return {
      isPending: false,
      isSuccess: false,
      isFailure: true,
      error
    };
  }

};

// ------------------------------------
// Reducer
// ------------------------------------
const initialState = {
  isPending: false,
  isSuccess: false,
  data: [],
  isFailure: false,
  error: undefined
};

export default function thingReducer (state = initialState, action) {
  const handler = ACTION_HANDLERS[action.type];

  return handler ? handler(state, action) : state;
}

So what should I do if I need to represent spinner (or error) for each of those actions?

Should I do something like

store = {
  things: {
    get: {
      data: [],
      isPending,
      isError,
      isSuccess,
      error
    },
    post: {
      data: [],
      isPending,
      isError,
      isSuccess,
      error
    },
    put: {
      data: [],
      isPending,
      isError,
      isSuccess,
      error
    },
    delete: {
      data: [],
      isPending,
      isError,
      isSuccess,
      error
    }
  }
};

Looks like the wrong approach

Answer 1

If you only want to know if a request is pending and what method (get/post/put/delete) is being used, you could just store the method type alongside with the rest in your state, e.g:

{
  data: [],
  isPending: true,
  method: 'POST',
  isSuccess: false,
  isError: false,
  error: undefined
}

Then you can check for it in your components, e.g:

const { isPending, method } = this.state;

if (isPending && method === 'POST') {
  // Do your thing
}

You probably shouldn't use a string for the method type though – use a constant instead.