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 =（状态= {}，操作）=> { 开关（action.type）{ 案例START_LOADING_TASK： return Object.assign（{}，state，{[action.payload]：true}）; 情况END_LOADING_TASK： return Object.assign（{}，state，{[action.payload]：false}）; 默认：返回状态； } };

actions:

export const startLoadingTask =（taskName）=>（{ 类型：START_LOADING_TASK，有效负载：taskName， }）;

export const endLoadingTask =（taskName）=>（{ 类型：END_LOADING_TASK，有效负载：taskName， }）;```

我尝试了它的完美效果，但我想知道，
1.还有什么更好的方法来使用redux处理获取状态？ 2.现在，许多投资组合将被订阅到loadingTasks状态，恐怕会导致性能问题。（对于加载任务中的每一次更改，所有React都会对所有订阅的组件运行挖掘算法）

Answer 1

我建议将获取状态与请求的资源并置，例如：

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

这样，当todos的获取状态更改时，仅依赖于待办事项的组件将重新呈现。

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

例如，如果待办事项请求失败，您可能会遇到错误状态。或者，如果用户请求失败，则错误消息会提供某些上下文，甚至包含从API返回的错误：

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

处理Redux中的状态的最佳方法

1 个答案: