减少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调用显示加载程序。
• 装载机完成后隐藏起来
• 如果出现错误，请停止加载程序并显示错误消息

我不想把上面的代码复制到所有的减速机上

Answer 1

您可以保持单独的操作，例如，SHOW_LOADER、HIDE_LOADER来处理加载程序。当您发出web调用或api调用返回时，可以分派这些操作。可以从应用程序的任何位置分派这些操作来处理加载程序状态。你必须把它写在一个减速机里，它可以从任何地方调用。