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

【问题标题】：Best way to handle loading, success and error in redux在 redux 中处理加载、成功和错误的最佳方法
【发布时间】：2020-05-05 11:14:11
【问题描述】：

问题总结

我正在开展一个使用大量 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 的原因。

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

【问题讨论】：

另一种方法是共享 redux loading 和 error 状态。但这有其自身的警告......例如必须为每个请求重置它，如果同时发出多个 AJAX 请求，则处理错误/加载将更加困难。理想情况下，redux 的结构应该是关注点分离的；特别是如果检索到的数据不相关。也就是说，无论您选择哪个方向（Redux 状态或 React 状态），这种样板设计模式（isLoading、error 和 data）都会流行。
我知道如果您使用 thunk 中间件 redux-toolkit 库可能为时已晚，这是减少样板文件的方法。附带的createAsyncThunk 函数会自动为pending、fulfilled 和rejected API 调用生成操作。话虽如此，您仍然需要决定如何构建您的 reducer，以及是否为每个 API 调用设置单独的 isLoading 和 error 变量

标签： reactjs redux react-redux boilerplate

【解决方案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
    }
  }
}

【讨论】：

这就是我们已经为每个端点所做的，我们有 50 个端点意味着 50 个这样的文件。

【解决方案2】：

你可以在 redux 官方文档中找到：

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

这两个时刻中的每一个通常都需要更改应用程序状态；为此，您需要调度将由 reducer 同步处理的正常操作。通常，对于任何 API 请求，您都需要调度至少三种不同类型的操作...

选择是使用带有标志的单一动作类型还是使用多种动作类型，由您决定。这是您需要与您的团队一起决定的约定。多种类型可以减少出错的空间，但如果您使用 redux-actions 之类的辅助库生成动作创建者和归约器，则这不是问题。

Here is the doc link

【讨论】：

【解决方案3】：

如果有人也对此感到疑惑，我找到了一个很好的解决方案。

本质上我们创建了一个全局加载减速器和错误减速器

在此处阅读原始文章（并鼓掌）： https://medium.com/stashaway-engineering/react-redux-tips-better-way-to-handle-loading-flags-in-your-reducers-afda42a804c6

【讨论】：