Разработка библиотеки React для приостановки для извлечения данных в одновременном режиме

Новые экспериментальные реагирующие клетки

Введение

Мы долго ждали «приостановки для извлечения данных». Теперь он предоставляется в качестве экспериментальной функции в Экспериментальный канал Анкет

Проверьте официальные документы для получения подробной информации.

Они стараются лучше всего объяснить новые наборы разумов с аналогиями. Это означает, что он полностью отличается от использования с традиционным реагированием. Да, это другое и многообещающе.

Этот пост должен изучить использование с приостановкой для извлечения данных. Обратите внимание, что все функции являются экспериментальными, а текущее понимание может быть неправильным в будущем.

Чтобы получить выгоду от приостановки для извлечения данных в одновременном режиме, мы должны использовать шаблон «рендеринг-как вынесенный». Это требуется, чтобы начать получать до рендеринга. Нам нужно иметь новую ментальную модель, потому что мы так используем для получения в использовании или ComponentDidMount.

Этот пост пока не дает конкретного ответа на лучшие практики, но вот что я сделал сейчас.

CreateFetcher

Давайте создадим «выборку», который завершает функцию выбора. Это может быть произвольная асинхронная функция, которая возвращает обещание.

const fetcher = createFetcher(async url => (await fetch(url)).json());

Это общий получен, который принимает URL в качестве ввода и предполагает ответ JSON. Как правило, мы хотели бы создать более специализированных магистров.

Фетчер предоставляет два метода: предварительный и LazyFetch Анкет

Если вы призываете Предварительная перефетка , он начнет функцию Fetch, и вы получите «приостановленную». «Приостановление» – это объект с двумя свойствами: данные и Refetch Анкет данные это получить результат обещания, но это даст обещание, если обещание не будет решено. Refetch снова запустит функцию Fetch и возвращает новую «приостановленную».

Если вы призываете Lazyfeth Вы получите «приостановленные», похожие на запасные данные и ленивый флаг. На самом деле он никогда не приостановит, но вы можете относиться к нему как к «приостановлению», как и тот, который был возвращен Предварительная перефетка Анкет

Теперь типовое типинг CreateFecher – это следующее:

type Suspendable = {
  data: Data;
  refetch: (input: Input) => Suspendable;
  lazy?: boolean;
};

type Fetcher = {
  prefetch: (input: Input) => Suspendable;
  lazyFetch: (fallbackData: Data) => Suspendable;
};

export const createFetcher: (
  fetchFunc: (input: Input) => Promise,
) => Fetcher;

Реализация этого немного длинная.

export const createFetcher = (fetchFunc) => {
  const refetch = (input) => {
    const state = { pending: true };
    state.promise = (async () => {
      try {
        state.data = await fetchFunc(input);
      } catch (e) {
        state.error = e;
      } finally {
        state.pending = false;
      }
    })();
    return {
      get data() {
        if (state.pending) throw state.promise;
        if (state.error) throw state.error;
        return state.data;
      },
      get refetch() {
        return refetch;
      },
    };
  };
  return {
    prefetch: input => refetch(input),
    lazyFetch: (fallbackData) => {
      let suspendable = null;
      const fetchOnce = (input) => {
        if (!suspendable) {
          suspendable = refetch(input);
        }
        return suspendable;
      };
      return {
        get data() {
          return suspendable ? suspendable.data : fallbackData;
        },
        get refetch() {
          return suspendable ? suspendable.refetch : fetchOnce;
        },
        get lazy() {
          return !suspendable;
        },
      };
    },
  };
};

Использование Предварительная перефетка почти всегда предпочтительнее. LazyFetch предоставляется только как обходной путь Для рисунка «Fetch-On-Render».

Как только вы получите «приостановленное», вы можете использовать его в рендеринге и отреагировать, позаботится об остальном.

Потому что нам нужно вызвать Предварительная перефетка Перед созданием элемента реагирования. Мы могли бы сделать это только вне функций рендеринга. На момент написания мы делаем это в файле компонентов во всем мире, Предполагая, что мы знаем, чего хотим, как начальное «приостановленное». Это, вероятно, затруднит тестирование.

Используется

Образец, созданный CreateFetcher функционально завершен, но было бы неплохо иметь удобные крючки для использования «подвесных».

Самый простой – Используется Анкет Он просто хранит один «приостановлен» в местном штате.

Реализация Используется это следующее.

export const useSuspendable = (suspendable) => {
  const [result, setResult] = useState(suspendable);
  const origFetch = suspendable.refetch;
  return {
    get data() {
      return result.data;
    },
    refetch: useCallback((nextInput) => {
      const nextResult = origFetch(nextInput);
      setResult(nextResult);
    }, [origFetch]),
    lazy: result.lazy,
  };
};

Результат, возвращаемый с помощью крючка с использованием, почти похож на обычный «подвесный», но с небольшой разницей. Если вы призываете Refetch Вместо того, чтобы вернуть новое «приостановленное», он заменит значение состояния новым «приостановляемым».

Библиотека

Я разработал приведенный выше код в библиотеку.

https://github.com/dai-shi/react-hooks-fetch

Это очень экспериментально и изменится.

Демо

Вот один маленький пример с использованием этой библиотеки.

CodeSandbox

Есть несколько других примеров в репо.

Заключительные заметки

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

Первоначально опубликовано в https://blog.axlight.com 3 ноября 2019 года.

Оригинал: “https://dev.to/dai_shi/developing-a-react-library-for-suspense-for-data-fetching-in-concurrent-mode-2ggc”