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

Question

问题总结

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

我们尝试了

我们试图创建一个自定义的API Hook，它使用了 useReducer 并返回一个动态生成的 loading, success 和 error 变量。这个钩子暴露了一个 sendRequest 方法，可以在组件中使用。

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

它工作得很好，但有个问题，我们在组件中建立API端点，而这正是我们想改变的。这就是我们转向redux的原因。

理想情况下，我们希望将加载和错误逻辑从reducer中分离出来，我想知道是否有人有一个想法（或者知道一个包），可以帮助减少模板并实现这个目标。

Answer 1

你可以在redux官方文档中找到的是 。

当你调用一个异步API时，有两个关键的时刻：你开始调用的时刻，和你收到应答（或超时）的时刻。

这两个时刻中的每一个时刻通常都需要改变应用程序的状态；要做到这一点，你需要调度正常的动作，这些动作将被减速器同步处理。通常，对于任何一个API请求，你至少要调度三种不同的动作......

选择是使用带有标志的单一动作类型，还是使用多种动作类型，由你决定。这是你需要和你的团队一起决定的约定。多类型的动作出错的几率较小，但如果你使用类似于 还原作用.

这里是文档链接

Answer 2

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