在 redux 中处理获取状态的最佳方法

Question

我正在寻找在我的应用中处理获取状态的最佳方式， 最简单的方法是为每个操作创建一个 isFetching[actionName]，然后状态将如下所示：

state:{
todos:[...],
user[...],
isTodosFetching:true/false,
isUserFetching:true/false
}

但我正在寻找一种更优雅的方式在商店中存储获取状态。

所以我尝试了另一种方法并考虑创建一个 fetchingActionsReducer 它将每个获取操作添加到存储中的 dict(object) 中，然后状态将如下所示：

todos:[...],
user[...],
loadingTasks:{
isTodosFetching:true/false,
isUserFetching:true/false
}}```

now every component will get loadingTasks with mapStateToProps and that's it. 
this will reduce the boilerplate to one simple reducer and one action.
reducer:

export const loadingTasks = (state = {}, action) => { 开关（动作类型）{ 案例 START_LOADING_TASK： 返回 Object.assign({}, state, { [action.payload]: true }); 案例 END_LOADING_TASK： 返回 Object.assign({}, state, { [action.payload]: false }); 默认： 返回状态； } };

actions:

export const startLoadingTask = (taskName) => ({ 类型：START_LOADING_TASK， 有效载荷：任务名称， });

export const endLoadingTask = (taskName) => ({ 类型：END_LOADING_TASK， 有效载荷：任务名称， });```

我试过了，效果很好，但我想知道，
1. 有没有更好的方法来处理使用redux 获取状态？ 2. 现在很多作品集都会订阅 loadingTasks 状态，恐怕会导致性能问题。 （对于加载任务的每一次变化，所有反应都会为所有订阅的组件运行挖掘算法）

Answer 1

我建议将获取状态与请求的资源放在一起，例如：

state:{
  todos: {
    isFetching: true, // or false
    data: [/* ... */]
  },
  user: {
    isFetching: true, // or false
    data: [/* ... */]
  }
}

这样当todos的获取状态发生变化时，只有依赖于todos的组件才会重新渲染。

这种方法还可以启用其他状态。

例如，如果 todos 请求失败，您可能会出现错误状态。或者，如果用户请求失败，则提供一些上下文的错误消息，甚至包含从 API 返回的错误：

state:{
  todos: {
    isFetching: false,
    hasError: true, // or false
    data: [/* ... */]
  },
  user: {
    isFetching: false,
    errorMessage: 'Please check username exists', // or null
    data: [/* ... */]
  }
}