减少 redux-thunk 样板代码

Question

我正在使用 redux-thunk 中间件，它可以很好地处理异步操作，但是我有太多样板要编写，我该如何减少它？

export function userReducer(state = {
  signup_loading: false,
  signup_failed: '',
  signup_error: '',
  login_loading: false,
  login_failed: '',
  login_error: ''
}, { payload, payload: { data, error } }) {
  switch (action.type) {
    case SIGNUP_REQUEST:
      return {
        signup_loading: true
      }
    case SIGNUP_SUCCESS:
      return {
        signup_loading: false,
        data
      }
    case SIGNUP_FAILED:
      return {
        signup_loading: false,
        signup_error: error
      }
    case LOGIN_REQUEST:
      return {
        login_loading: true
      }
    case LOGIN_SUCESS:
      return {
        login_loading: false,
        data
      }
    case LOGIN_FAILED:
      return {
        login_loading: false,
        login_error: error
      }
    default: return state
  }
}

对于整个应用程序中的每个 http 调用，我都想做类似的事情：

• 在请求之前我想为每个 http 调用显示加载器
• 完成后隐藏加载器
• 如果错误停止加载程序并显示错误消息

我不想在所有 reducer 中复制粘贴上面的代码

Answer 1

您可以保留单独的操作，例如 SHOW_LOADER、HIDE_LOADER 来处理加载程序。当您进行 Web api 调用或 api 调用返回时，可以调度这些操作。可以从应用程序中的任何位置分派这些操作以处理加载程序状态。您只需要在一个可以从任何地方调用的 reducer 中编写它。