reactjs - 确定 Redux 状态空数组是初始状态还是返回空数组的 API 调用的结果的推荐方法是什么？

Question

假设我有一个如下所示的初始状态树:

    {
      users: [],
      items: []
    }

在某些情况下，调用项目 API 端点的结果可能会产生如下状态树:

    {
      users: [],
      items: [
              {itemId: 100, itemName: "Something100"},
              {itemId: 101, itemName: "Something101"}
             ]
    }

在其他没有要显示的项目的情况下，API 调用之后的状态树将与初始状态树相同。

现在在我的组件中使用 useEffect，如下所示:

  useEffect(() => {
      if (items.length === 0) {
        actions.loadItems().catch((error) => {
          alert("Loading items failed! " + error);
          console.log(error);
        });
      }
  }, [items , actions]);

在这种特殊情况下，项目的长度在两种情况下将为 0:初始状态或没有结果的情况。如果 API 返回零个项目并且 items.length === 0，则重复执行调用 API 的操作。

我们确实需要一种方法来知道空数组是否是初始状态。当然，我可以将状态树更改为:

    {
      users: {isLoaded: false, records: []},
      items: {isLoaded: false, records: []},
    }

这会增加大量开销和重构，而且可能不是最有效/有效的，所以有人可以给我推荐吗？

Answer 1

不幸的是，您将需要某种方式来跟踪初始化。如果问题是必须重构，那么您可以根据您的建议将此初始化状态拉出到对象中的更高顺序。这将避免重构太多:

{
  isUsersLoaded: false,
  isItemsLoaded: false,
  users: [],
  items: []
}

另一种选择是像这样初始化并检查是否 users !== null 等:

{
  users: null,
  items: null
}