Хватит пробрасывать пропсы в React-модалках (используйте react-call)
BBetter Stack
Computing/SoftwareInternet Technology
Transcript
00:00:00В React появился новый, невероятно интересный инструмент, который полностью меняет наше представление
00:00:05о рендеринге интерактивных элементов интерфейса, таких как модальные окна, диалоги или окна подтверждения.
00:00:11Он называется React Call.
00:00:13Если вы когда-либо создавали сложный многошаговый мастер форм, диалог подтверждения или
00:00:18выбор элементов в React, вы уже знаете, что управление состоянием открытия, передача колбэков успеха
00:00:24и обработка промисов могут превратить ваш код в абсолютный спагетти-код.
00:00:28Но React Call призван решить эту проблему.
00:00:31Поэтому в сегодняшнем видео мы рассмотрим React Call, увидим, как он работает, и разберем
00:00:36несколько примеров кода.
00:00:37Будет очень интересно, так что давайте начнем.
00:00:44Что же такое React Call?
00:00:47Это маленькая легкая утилита, которая позволяет вызывать компоненты React как асинхронные
00:00:52функции.
00:00:53Вспомните нативный браузерный API window.confirm.
00:00:57Когда вы его вызываете, выполнение кода буквально приостанавливается, ожидая, пока пользователь нажмет OK или отмену, и
00:01:03возвращает логическое значение прямо на месте.
00:01:06Это позволяет сохранить бизнес-логику полностью локальной для вызывающего кода.
00:01:09React Call переносит эту интуитивно понятную ментальную модель прямо в современный мир React.
00:01:16Вместо создания отдельной переменной состояния вроде isModalOpen, передачи пропсов onClose или
00:01:22onSubmit, и настройки сложных контекст-провайдеров или порталов, вы можете просто дождаться
00:01:29ответа компонента.
00:01:30Под капотом он берет на себя управление промисами, обрабатывает типы запросов и ответов
00:01:36из коробки, а также полностью поддерживает горячую перезагрузку модулей, чтобы ваш рабочий процесс
00:01:41оставался быстрым.
00:01:42Он предлагает три основные концепции: root и stack, upsert, и mutation flow.
00:01:48Первая важная концепция — это root и stack.
00:01:50В React Call вызываемый компонент, который вы создаете, — это не просто функция.
00:01:54Он фактически выступает в качестве собственной точки монтирования в дереве вашего приложения.
00:01:58Вы размещаете компонент как корневой тег в любом видимом месте, например, в файле приложения или в
00:02:03файле верхнего уровня макета, и он просто ожидает вызова.
00:02:06Когда вы делаете несколько вызовов, React Call управляет ими с помощью внутреннего стека, и
00:02:11автоматически обрабатывает рендеринг каждого активного экземпляра.
00:02:14Он также поддерживает анимацию при закрытии и изолирует экземпляры друг от друга,
00:02:20чтобы они не мешали работе других.
00:02:22Далее идет upsert — настоящее спасение для паттернов одиночных интерфейсных элементов.
00:02:27Обычно, если вы вызываете компонент несколько раз, он добавляет новый экземпляр в стек.
00:02:33Но что, если вы делаете глобальное уведомление, оверлей загрузки или индикатор прогресса,
00:02:39где вы хотите видеть только один экземпляр на экране за раз?
00:02:45Вместо выполнения call, вы можете использовать upsert.
00:02:48Если экземпляр уже активен, он плавно обновляет существующий компонент новыми данными прямо на лету,
00:02:52вместо того чтобы создавать дубликат.
00:02:56И наконец, это mutation flow.
00:02:58Библиотека включает встроенный хук useMutationFlow, специально разработанный для связки
00:03:04вызываемого интерфейса с асинхронными действиями.
00:03:06Если у вас есть модальное окно подтверждения, которое запускает тяжелый API-запрос при отправке,
00:03:12хук сам управляет состоянием ожидания.
00:03:15Он гарантирует, что модальное окно остается открытым и показывает индикатор загрузки, пока выполняется
00:03:21асинхронная функция, и официально закрывает его только после успешного разрешения промиса.
00:03:25Так что это прекрасно связывает состояние UI и мутации данных.
00:03:29Давайте посмотрим на практические примеры на их сайте, потому что они
00:03:34очень наглядны.
00:03:36И показывают, как мало кода нужно написать, чтобы заставить все работать.
00:03:41Например, для диалога подтверждения нам просто нужно создать вызываемый объект здесь.
00:03:48Затем мы оборачиваем наш компонент как компонент высшего порядка с помощью хука create callable.
00:03:54И после этого можем передать вызовы и функции для кнопок по клику.
00:04:01Это все, что нужно для вызываемого объекта.
00:04:04А в корне приложения достаточно импортировать сам компонент.
00:04:08И для кнопки удаления, поскольку наш компонент подтверждения обернут в функцию высшего порядка
00:04:14create callable, мы можем просто вызывать его асинхронно в этой функции обработки клика.
00:04:21Очень аккуратно, чисто и без лишнего шаблонного кода.
00:04:26Вам не нужно использовать контекст-провайдеры, переменные состояния, Redux или Zustand.
00:04:31Чтобы узнать больше о вариантах использования, посмотрите раздел примеров,
00:04:36где для каждого есть фрагмент кода.
00:04:40Некоторые из них довольно сложны, например, те, что работают с асинхронными действиями,
00:04:46выполняющимися в фоне.
00:04:49Так что изучайте эти крутые примеры.
00:04:52Это очень здорово и очень легковесно.
00:04:55Отличная работа.
00:04:56Итак, вот и все, друзья.
00:04:57Это React Call в двух словах.
00:04:59Хотя вы, безусловно, могли бы сами написать базовую обертку для промисов или простое модальное окно,
00:05:06я думаю, эта библиотека отлично справляется со всеми сложными краевыми случаями, такими как управление
00:05:11несколькими активными экземплярами в стеке, обновление одиночек через upsert и синхронизация состояний UI
00:05:17с тяжелыми бэкенд-мутациями.
00:05:18Это отличная легковесная утилита, которую стоит добавить в свой инструментарий для более чистой
00:05:24и читаемой архитектуры React.
00:05:26Что вы думаете о React Call?
00:05:28Вам нравится этот паттерн?
00:05:29Будете использовать его в своих проектах?
00:05:31Дайте знать в комментариях ниже.
00:05:33И друзья, если вам нравятся такие технические разборы, пожалуйста, дайте мне знать, нажав на кнопку
00:05:37лайка под видео.
00:05:39И не забудьте подписаться на наш канал.
00:05:42С вами был Андрус из BetterStack, увидимся в следующих видео.
00:05:58вы
Community Posts
No posts yet. Be the first to write about this video!
Write about this video