Какой рекомендуемый способ определить, является ли пустой массив состояния Redux начальным состоянием или результатом вызова API, который возвращает пустой массив?

Question

Допустим, у меня есть исходное дерево состояний, которое выглядит следующим образом:

    {
      users: [],
      items: []
    }

В некоторых случаях результат вызова конечной точки API элементов может привести к такому дереву состояний:

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

В других случаях, когда нет элементов для отображения, дерево состояний после вызова API будет идентично дереву начального состояния.

Теперь в моем компоненте I ' m с использованием 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 et c.:

{
  users: null,
  items: null
}