Proper way to handle errors in redux using redux-promise

Question

I'm trying "redux-promise". When there's no error in the flow, my code works properly. But, let's say that the API is down or I have a typo in the URL. In those cases, I expect to handle the error in the proper way.

This is the API: https://jsonplaceholder.typicode.com/users (in the snippet I'm adding random text at the end to produce the 404)

Action creator

export async function fetchUsers() {

  const request = await axios
    .get('https://jsonplaceholder.typicode.com/userssdfdsfdsf')
    .catch(error => console.log('ERROR', error))

  return {
    type: FETCHING_USERS,
    payload: request
  };
}

Reducer

export default (state = [], action) => {
  switch (action.type) {
    case FETCHING_USERS:
      return [...state, ...action.payload.data]

    default:
      return state
  }
}

I can see the error logged in the console

ERROR Error: Request failed with status code 404

But, once the action is dispatched its payload is undefined

action {type: "FETCHING_USERS", payload: undefined}

I don't know where is the best place to handle this: action creator, reducer, etc. I shouldn't check if payload is something in the reducer and, if not, return state or do nothing. I want to understand which would be the best approach to handle this.

score 0 · Answer 1 · answered Jun 05 '19 at 08:58

You may look at source of redux-promise, as it very simple.

Redux-promise expects either promise or action with payload set to some promise. I think you're going to use leter case.

Code may look like (just example, not tested):

export function fetchUsers() {

    const request = axios.get('https://jsonplaceholder.typicode.com/userssdfdsfdsf');

    return {
        type: FETCHING_USERS,
        payload: request
    };
}

In this case redux-promise will await for resolution of promise returned by axios.get and dispatch your action but payload replaced with promise result. In case of error, redux-promise will catch it and dispatch action with error = true (you may want to handle action.error === true case in reducer)

score 0 · Answer 2 · answered Oct 02 '19 at 23:25

0

In the reducer you should check for the existence of the error field in action:

export default function(state = null, action) {
  if (action.error) {
    //handle
  }  
  switch(action.type) {

answered Oct 02 '19 at 23:25

varoons

3,807
1
16
20

Chandan Jaiswal · Answer 3 · 2019-10-03T06:25:07.507

This code is for the action.

export const fetchUsers = () => async dispatch => { try { const res = await axios.get('https://jsonplaceholder.typicode.com/userssdfdsfdsf'); dispatch({ type: FETCHING_USERS, payload: res.data }); } catch (err) { dispatch({ type: FETCHING_ERROR }); } };

In reducer do this. Define the initial state and use this code.

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case FETCHING_USERS:
      return {
        ...state,
        loading: false,
        user: payload,

      };
case FETCH_ERROR:
      return {
        ...state,
        token: null,
        loading: false,
      };

Proper way to handle errors in redux using redux-promise

3 Answers3