在 redux 中处理获取状态的最佳方法
我正在寻找处理应用中的获取状态的最佳方法， 最简单的方法是为每个操作创建一个 isFetching[actionName]，然后状态将如下所示：
state:{
todos:[...],
user[...],
isTodosFetching:true/false,
isUserFetching:true/false
}
但我正在寻找一种更优雅的方法将获取状态存储在商店中。
所以我尝试想出一种替代方法，并考虑创建一个 fetchingActionsReducer，它将每个获取操作添加到商店中的 dict（对象），然后状态将如下所示：
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) => { switch (action.type) { case START_LOADING_TASK: return Object.assign({}, state, { [action.payload]: true }); case END_LOADING_TASK: return Object.assign({}, state, { [action.payload]: false }); default: return state; } };
actions:
export const startLoadingTask = (taskName) => ({ type: START_LOADING_TASK, payload: taskName, });
export const endLoadingTask = (taskName) => ({ type: END_LOADING_TASK, payload: taskName, });```
我试过了，效果很好，但我想知道，
1. 有没有更好的方法用 redux 来处理获取状态？
2. 现在许多投资组合将订阅 loadingTasks 状态，
我担心这会导致性能问题
。 （对于加载任务中的每个变化，所有 React 都会对所有订阅的组件运行挖掘算法）
我建议将获取状态与所请求的资源放在一起，例如：
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: [/* ... */]
}
}