时间戳

首页 > 解决方案 > 在 redux 中处理获取状态的最佳方法

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

问题描述

我正在寻找在我的应用程序中处理获取状态的最佳方法，最简单的方法是为每个操作创建一个 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) => { 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 }); 默认：返回状态；} };

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状态，恐怕会导致性能问题。（对于加载任务中的每一次更改，所有反应都将为所有订阅的组件运行挖掘算法）

标签： reactjsreduxreact-redux

解决方案

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

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: [/* ... */]
  }
}

推荐阅读