Handling errors in React Redux

Question

I've read some qestions about errors in redux but still not quite understand it.

For example in my app I have activeUser reducer where I store null or object with logged user. It listens to actions and changes its state if needed. Simple.

But how errors reducers should work and look?

I did my errors reducers this way:

I have single error/index.js file where I store all errors reducers:

import * as actionTypes from '../../constants'

export const wrongUsername = (state = false, action) => {
  switch (action.type) {
    case actionTypes.WRONG_USERNAME:
      return state = true
    case actionTypes.RESET_ERRORS:
      return state = false
    default:
      return state
  }
}

export const wrongPassword = (state = false, action) => {
  switch (action.type) {
    case actionTypes.WRONG_PASSWORD:
      return state = true
    case actionTypes.RESET_ERRORS:
      return state = false
    default:
      return state
  }
}

export const usernameIsTaken = (state = false, action) => {
  switch (action.type) {
    case actionTypes.USERNAME_IS_TAKEN:
      return state = true
    case actionTypes.RESET_ERRORS:
      return state = false
    default:
      return state
  }
}

And this is my reducers/index.js file wher I combine all my reducers:

const reducers = combineReducers({
  activeUser,
  viewableUser,
  isLoading,
  isFriend,
  userMessages,
  users,
  wasRequestSend,
  wrongUsername,
  wrongPassword,
  usernameIsTaken
})

is this normal or not? Should I change structure of my errors reducers?

you can create one commong reducers for error handling with dedicated flag in state.No need of multiple one — RIYAJ KHAN
– RIYAJ KHAN, Commented Mar 22, 2018 at 10:21

Alexandre Nicolas · Accepted Answer · 2018-03-22 10:31:21Z

State can be an object, so you can do only one user reducer where state is an object.

A reducer return a new a new state of an entity. So you could write thing like that:

export const wrongUsername = (state = false, action) => {
  switch (action.type) {
    case actionTypes.WRONG_USERNAME:
      return true
    case actionTypes.RESET_ERRORS:
      return false
    default:
      return state
  }
}

You shouldn't mutate state in reducer (or somewhere else).

So, speaking about state as object, you can have less reducers than by using your logic.

example:

const initialState = {
   currentUser: null,
   users: [],
   isLoading: false, // I assume it is for display a spinner
}

export default userReducer = (state = initialState, action) {
   switch(action.type) {
      case SET_CURRENT_USER:
         return {
            ...state,
            currentUser: action.currentUser,
         }
      case ADD_USER:
         return {
            ...state,
            users: [...state.users, action.user]
         }
      case SET_IS_LOADING:
         return {
            ...state,
            isLoading: action.isLoading
         }
      default:
         return state
   }

}

Your reducer should be represent an entity. So to answer your question, there is several way of handling error with redux. If you want to display error in form you can use redux-form. Else, you can store the error in your object state and reset it when needed.

But the best option is to use a module that display error to user. So when you catch the error you can display it. (react-redux-toastr, this work well).

Tarikh Agustia · Accepted Answer · 2018-03-22 10:30:03Z

1

you need to create some js file like this :

export default {
  loginFailed : 'Username or Password is wrong'
}

and in your Store make state message , and pass error message to store like this

import ErrorCost from './somerror.js'
export const wrongPassword = (state = false, action) => {
  switch (action.type) {
    case actionTypes.WRONG_PASSWORD:
      return {
         error : true,
         message : ErrorCost.loginFailed 
      }
    default:
      return state
  }
}

answered Mar 22, 2018 at 10:30

Tarikh Agustia

112 bronze badges

Collectives™ on Stack Overflow

Handling errors in React Redux

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related