Давным-давно, во времена написания приложений Angular 1.x, вы могли слышать о новых фреймворках javascript, создаваемых каждые два месяца. Я вспоминаю вводные документы для различных фреймворков, таких как Angular, React, Ember, Riot, Backbone, Aurelia, Vue, Polymer, и у меня возникало ощущение, что я сильно отстал от времени, или задавался вопросом, пошел ли я по правильному архитектурному пути для своего Приложения. И не только я чувствовал это. Сообщество Javascript быстро развивается, и легко чувствовать, что вы можете остаться позади.

Теперь, вернувшись с React Conf 2019, я обнаружил, что вижу то же самое, что сегодня происходит со стандартами управления данными в React. На конференции React команда React рассказала о создании лучших API, работающих с Graph QL, Suspense и Concurrent mode. На той же конференции я слушал потрясающий доклад Таджаса Кумара о том, как с помощью хука реакции работают успокаивающие apis. Он создал библиотеку под названием restful-response, которая упрощает процесс выборки данных с помощью простого крючка. Несколько дней спустя через сабреддит React я нашел библиотеку под названием response-query с API, похожим на библиотеку Tajas. И первоначальная причина, по которой я попал в этот пост на Reddit, заключалась в том, чтобы помочь товарищу по команде просмотреть его сообщение в Reddit о его собственном javascript-фреймворке для управления данными под названием ReSift.

Таким образом, в настоящее время нет «четкого выбора» для получения / управления данными в приложении для реагирования. Следовательно, теперь мы видим множество решений для управления данными в режиме реагирования.

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

Чем библиотеки извлечения данных / управления полезны для команды инженеров?

  1. Они дают возможность хранить выборки. Сохраняя выборки, вам не придется снова вызывать конечные точки, если данные уже существуют в кеше. Это обеспечивает быструю бесперебойную работу с меньшим количеством состояний загрузки, и ваши серверные инженеры будут любить вас за это (по крайней мере, счет AWS будет меньше).
  2. Они позволяют лучше компоновать компоненты, не поддерживая данные бурения. Приложения без таких библиотек данных должны будут полагаться на необходимость вызова конечной точки в родительском компоненте, чтобы затем передать эти данные этим компонентам. С этими библиотеками выборки вам не нужно поддерживать данные детализации или функции выборки. Просто отправьте / получите данные внутри компонента, который вызывает / нуждается в данных. (Подробнее в примере ниже)
  3. Они упрощают управление загрузкой и состояниями ошибок.
  4. Ваша команда инженеров будет кодировать быстрее и создавать легко читаемые компоненты, придерживаясь стандарта выборки данных, который позволяет избежать резких различий между инженерами, полученными при извлечении асинхронных данных.

Axios стихи Пример Resift

Вот сравнение базовой библиотеки выборки javascript с библиотекой выборки / управления данными под названием ReSift, созданной Рико Калером.

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

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

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

Ниже <DogPicture />. Теперь вместо того, чтобы передавать свойства этому компоненту, у вас есть доступ к значениям внутри компонента. Это позволяет полностью отделить данные от функции handleFetch, предоставляя вам иерархию компонентов, которая не ограничивается бурением опор. А меньшее количество отверстий для пропуска означает меньшую вероятность того, что вы вызовете бессмысленную повторную визуализацию компонентов.

Также обратите внимание на крючок useStatus. Этот хук дает доступ к статусу загрузки выборки. Resift поставляет ошибку, загрузку, неизвестное (нет данных) и нормальное состояние. Вы можете попрощаться и попробовать уловки или .error обещания.

Вот <DogPictureAction />, обратите внимание, что отправка происходит внутри компонента!

Наконец, это наша выборка. Вы можете увидеть, насколько похожа реализация axios на Resift.

В целом, при использовании Resift ваши компоненты будут более изолированными, будут иметь меньше свойств и построены в иерархии компонентов, которая работает для вашего приложения. Полученные вами данные будут храниться в папке, где их можно будет повторно использовать в вашем приложении, что упростит группам работу и упростит совместное использование кода. Асинхронные части выборки данных обрабатываются статусами загрузки resift.

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

А теперь я завершаю эту тираду гифкой о том, как мило это приложение. Спасибо за чтение!