Как правильно организовать поэтапную подгрузку данных с сервера?

Question

[lexstile]

1 проблема: каким образом и где сетить данные в store? (не особо нравится, что разделил логику на state и store - может быть, offset стоит сетить в store?)

spoiler

const enrollments = useSelector((state) => get(state, 'app.enrollments') || []);

  const [filter, setFilter] = useState(get(FILTERS, '0.value'));
  const [offset, setOffset] = useState(0);

  const countEnrollments = useRef(enrollments.length);

  const isButtonHidden =
    enrollments.length === countEnrollments.current || enrollments.length % DEFAULT_COUNT_ITEMS_PER_PAGE !== 0;

  const onLoadEnrollments = () => setOffset(offset + 1);
  const loadEnrollments = () => dispatch(getEnrollments({ userId, filter, offset }));
  const clearEnrollments = () => dispatch(setEnrollments([]));

  useEffect(loadEnrollments, [filter, offset]);

  useEffect(() => {
    setOffset(0);
    clearEnrollments();
    set(countEnrollments, 'current', 0);
  }, [filter]);

  useEffect(() => {
    const length = get(enrollments, 'length', 0);
    const current = get(countEnrollments, 'current', 0);

    if (length !== current) {
      set(countEnrollments, 'current', length);
    }
  }, [enrollments]);

// getEnrollments

export const getEnrollments = (data) => async (dispatch, getState) => {
  const [execute] = apiShell(callEnrollments, dispatch);
  const response = await execute(data);

  const enrollments = get(response, 'enrollments') || [];
  const offset = get(data, 'offset');

  if (!offset) {
    dispatch(setEnrollments(enrollments));
    return;
  }

  const store = getState();
  const storeEnrollments = get(store, 'app.enrollments') || [];

  dispatch(setEnrollments([...storeEnrollments, ...enrollments]));
};

2 проблема: отображение кнопки (isButtonHidden)
Я пока что привязался к остатку от деления - если пришло < 10 элементов, значит они пришли все
и если следующий запрос вернул то же количество элементов, что и предыдущий, значит следующий запрос больше уже не вернет и можем не показывать кнопку.
Проблема в том, что если пришло 10 элементов, то мы не знаем, последние ли они или нет, кнопка показывается и нам, как минимум, нужно один раз нажать на нее (единственное решение, которое пришло в голову, возвращает с BE общее количество элементов).

Comments

[Рамис]

Я так, рядом проходил. Если я все правильно понял.

Проблема в том, что если пришло 10 элементов, то мы не знаем, последние ли они или нет, кнопка показывается и нам

Запрашивать всегда 11 элементов, выводить 10.
Если элементов пришло меньше 11, не показываем кнопку.