CODEWITHSUNDEEP
reactjsredux
Dennis Braun
Dennis Braun

Reputation: 259

Handling errors in React Redux

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?

Upvotes: 0

Views: 243

Answers (2)

Alexandre Nicolas
Alexandre Nicolas

Reputation: 1949

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).

Upvotes: 1

Tarikh Agustia
Tarikh Agustia

Reputation: 11

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
  }
}

Upvotes: 1

Related Questions