处理React Redux中的错误

Question

我已经阅读了一些有关redux中的错误的问题，但仍然不太了解它。

例如在我的应用程序中我有activeUser reducer，其中我存储null或object与已登录的用户。它会监听actions并在需要时更改其状态。简单。

但errors减速器应该如何工作和看？

我这样做了我的错误减少器：

我有单个error/index.js文件，我存储所有错误减少器：

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

这是我的qazxsw poi文件，我将所有的qazxsw poi组合在一起：

reducers/index.js

这是正常的吗？我应该改变我的reducers减速器的结构吗？

Answer 1

状态可以是一个对象，因此您只能执行一个状态为对象的用户缩减器。

reducer返回一个新的实体状态。所以你可以这样写：

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

你不应该在reducer（或其他地方）中改变状态。

因此，将状态视为对象，您可以使用比使用逻辑更少的缩减器。

例：

errors

您的reducer应该代表一个实体。所以要回答你的问题，有几种方法可以用redux处理错误。如果要在表单中显示错误，可以使用redux-form。否则，您可以将错误存储在对象状态中，并在需要时重置它。

但最好的选择是使用向用户显示错误的模块。因此，当您发现错误时，您可以显示它。 （react-redux-toastr，这项工作很好）。

Answer 2

你需要创建一些像这样的js文件：

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

并在您的

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
   }

}

发出状态消息，并将错误消息传递给

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

像这样

Store