在 redux 中处理加载、成功和错误的最佳方法

Question

问题总结

我正在处理一个我们使用大量 API 请求的项目，我们希望通过许多新端点进一步扩展。该项目是使用 Redux 和 Hooks 构建的。我们希望将 API 请求与组件分开，这就是为什么我们的目标是将所有内容都放在 redux 中。但是，出现了一个问题：有很多样板，例如： FETCH_DATA_REQUEST, FETCH_DATA_SUCCESS, FETCH_DATA_ERROR需要为每个端点复制。此外，我们必须处理所有这些的加载、成功和错误。这似乎是很多代码，尤其是随着应用程序的增长。

我们尝试过的

我们试图创建一个使用自定义的API钩子useReducer在幕后，并返回一个动态生成的loading，success和error变量。这个钩子公开了一个sendRequest可以在组件中使用的方法，如下所示：

sendRequest("GET", `${BASE_URL}/api/endpoint`);

它运行良好，但有一个问题，我们正在组件中构建 API 端点，这就是我们想要更改的内容。这就是我们转向 redux 的原因。

理想情况下，我们希望将加载和错误逻辑与减速器分开，我想知道是否有人有想法（或知道一个包）可以帮助减少样板并实现这一目标。

Answer 1

const loading = () => {type: 'loading'}
const loaded = (data) => {type: 'loaded', data: data}
const error = (err) => {type: 'error', data: err}

const load = async() => {
dispatch(loading)
try{
 const res = await fetch ---- fetch here
if(res){dispatch(loaded(res))}
}catch{
(err) => {dispatch(error())}
} 
}

减速器

const initialState = {
  loading: false,
  data: {},
 error: false
}

export default(state = initialState, {type, data}) => {
  switch(type){
   case 'loading':
    return {
     ...state,
     loading: true
    }

    case 'loaded':
    return {
     ...state,
     loading: false,
     data: data
    }

    case 'error':
    return {
     ...state,
     loading: false,
     error: data
    }
  }
}