Представляем нагрузку React – компонент React без головы для обработки состояний обещаний и данных ответов

1656578051 predstavlyaem nagruzku react – komponent react bez golovy dlya obrabotki

автор Джейк Мокси

Простой, декларативный и легкий

XuV9yuD-347LsZM-q9Ws71xI4vuLQR0Bp-E7

Фон

Сейчас у React существует множество методов обработки состояния. от местное государство к Reduxновый React Context API и новые библиотеки, такие как Неизвестно и Копировать Написать. Все эти методы имеют отличные варианты использования, и нет абсолютных принципов, в которых я полностью отказался бы от одного в пользу другого. У каждого из них есть свои ситуационные преимущества.

Но я не хочу вникать в тонкости управления государством React. Для этого посмотрите замечательную статью Кента К. Додда об управлении состоянием программы.

Хотя я хочу коснуться случая обработки загрузки и состояния ответа от a обещание, например HTTP-запросы и средства получения ресурсов Обещание имеет три явных состояния: на рассмотрении, решено, и отклонено. Он имеет дополнительное неявное состояние неработающий, когда обещание еще не сработало.

Как управляется состоянием обещаний в React?

Им можно управлять в местном штате с помощью чего-то такого простого, как isLoading переменная, чтобы отразить состояние «ожидающего». response и error переменные затем используются для отображения «решенного» и «отклоненного» состояний соответственно.

Им можно управлять в магазине Redux с помощью таких действий, как GET_DOG_REQUEST , GET_DOG_SUCCESS и GET_DOG_ERROR . Затем они могут сопоставляться с соответствующими isLoading , response и error сменные в магазине.

Управление состоянием обещаний может быть опасным, трудно читаемым и проблематичным UX!

  1. Вложенные троичные файлы в вашем render Функция может быть тяжелой для интерпретации и беспорядочной, следовательно, может быть подвержена ошибкам. Вот пример такой проблемы:

По этому примеру это непонятно !error && !response подразумевает состояние «бездействия». Также непонятно, что else раздел isLoading Тернарный означает, что раздел был загружен или ошибочно. И только представьте, что вы руководите несколькими обещаниями и соответствующими состояниями! Ура

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

yLxb1A-wlpYUtP4kb6DiES2VeVqepaYVwBrV
Вы можете увидеть короткую «вспышку» заполнителя содержимого, когда это сообщение в Facebook загружается.

3. Исключительно управлять состояниями обещаний в Redux не требуется. Когда Redux был впервые выпущен, разработчики обычно переносили большую часть своего состояния в магазин Redux. Однако создание трех действий для состояния обещания, а затем создание трех случаев редуктора для этих действий, влечет за собой ненужное раздутие в вашей программе. Я тоже в этом виноват – но уж нет! На мой взгляд, достаточно действий для обработки данных об ответах/ошибках.

Избегайте обработки состояния обещаний в Redux.

Представляем погрузку React

Целью React Loads является решение вышеуказанных проблем минималистическим способом. Пользователь предоставляет <Loads> с функцией, возвращающей обещание. Это вернетсяn its статe and response data as визуализировать реквизит.

jxom/react-loads
react-loads — простой компонент React для обработки состояния загрузкиgithub.com

Декларативно обрабатывать данные о состоянии обещания и ответы

React Loads предоставляет вам render props для скачивания обещания. Это также обрабатывает его состояние и данные ответа. Вы можете заставить его загрузить обещание, когда компонент монтируется, передав loadOnMount поддержка к <Loads>.

Предполагаемые результаты

Использование переменных состояния, таких как isIdle , isLoading , isTimeout , isSuccess и isError от render реквизит сделает ваш render функция предсказуема и легко читаема.

Удаляет «вспышку» состояния загрузки

React Loads не переходит в состояние загрузки до 300 мс после запуска обещания. Он будет ждать 300 мс для обещания надеюсь решить, прежде чем перейти в состояние ожидания. Это время можно изменить с помощью delay опора для <Loads>.

Возможность кэширования данных ответов

React Loads имеет возможность кэшировать данные ответа на уровне контекста программы. После загрузки данных по вызову fn он будет использовать ответ, возвращенный из обещания для следующего следующего вызова response . Новые данные будут загружаться в фоновом режиме, пропуская isLoading состояние и обновление response соответственно. Кэширование можно включить, добавив a cacheKey поддержка к <Loads>. Подробнее о кэшировании читайте здесь.

В последние несколько месяцев мы использовали React Loads в производстве в Medipass в нашем веб-приложении для пациентов и практикующих врачей. Это облегчило наш опыт развития. Нам удалось удалить кучу кода, который обрабатывал данные о состоянии обещаний и ответов, и просто позволил React Loads выполнять всю грязную работу.

Подумайте об использовании его в одном из своих проектов и дайте мне знать, как это происходит! Если у вас есть какие-либо предложения или вы заметили ошибку, не стесняйтесь сообщить о PR (или проблеме) в хранилище!

Спасибо, что прочли!

Следите за мной в Twitter и GitHub (я обещаю, что я буду следить за вами).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *