Question

基本上，在所有Redux示例和文档中，该示例都是在处理异步请求（即布尔值，通常是isFetching在发出请求时切换为true，在成功或失败时为false）时进行显示的。

当我加载页面时，将由多个组件进行多个API调用，当对API发出任何请求时，我想显示一个加载指示器。因此，这可能不是最佳解决方案：

Action1将isFetching切换为true，然后开始从API提取
Action2将isFetching切换为true并开始从API提取
Action1已完成，即使Action2仍在加载中，isFetching也变为false。

您将如何解决这种情况？

谢谢！

Answer 1

将isFetching转换为数字。每个挂起的呼叫都会增加该数字，而每个成功/失败都会减少该数字。

const reducer = (state = { fetchingCounter: 0 }, { type }) => {
    switch(type) {
      FETCHING_PENDING:
        return { fetchingCounter: state.fetchingCounter + 1 };
      FETCHING_DONE:
        return { fetchingCounter: state.fetchingCounter - 1 };
    }    

    return state;
};

添加一个selector来将数字转换为布尔值-

const isFetching = ({ isFetching }) => !!isFetching

Answer 2

希望在几个月内，您将能够使用新的fetcher / createResource概念与Suspense一起轻松处理此问题。在第25分钟左右，您可以在Andrew Clark的Concurrent Rendering in React presentation中看到对此的描述。但这是未来的功能（Suspense已经可用，但仅与代码拆分集成，尚未与API调用集成）。

因此，到目前为止，您有两个主要选择：

使用一个在开始/结束api调用时递增/递减的计数器（看来Ori Drori刚刚用这种方法发布了答案）
使用多个布尔值-每个涉及的api调用一个，并显示加载指示符（如果有）为true。在计数器上使用此代码的唯一原因是，如果您希望加载指示器更具体（即使用特定的布尔值以某种方式指示要加载的内容）

Redux-处理多个同时请求

2 个答案: