В этой статье мы стремимся представить пример использования React Hooks и Context API для глобального отображения уведомлений. В представленном здесь примере создается способ отображения сообщений об ошибках (а именно сообщений об ошибках API), сообщаемых компонентами функций (нашими страницами) при выполнении запроса. Представленный здесь подход был вдохновлен событием уровня исчезновения паттернов. В конце мы также объясняем, как легко протестировать некоторые из созданных компонентов. Вы можете найти полные примеры кода, описанные в этом блоге, в этой папке с кодами.

У нас есть структура папок, подобная следующей:

src/App.js - это точка входа для нашего приложения React, аналогичная тому, что создается с помощью Create React App.

Папка src/components содержит основные компоненты реагирования, которые варьируются от кнопки до модального, верхнего колонтитула, нижнего колонтитула и т. Д. (Для такого простого проекта мы не чувствовали необходимости разделять, используя что-то вроде атомарного дизайна). Папка features содержит страницы, которые представляют собой интеллектуальные компоненты, которые обрабатывают сетевые запросы и структуру страниц.

Запросы API, пользовательские обработчики React и провайдеры, созданные с помощью Context API, можно найти в папке common, поскольку они могут использоваться совместно компонентами (а именно функциями).

Хорошо, но что именно мы хотим делать? восходящий подход, чтобы выявить ошибки и сделать их видимыми. Контекст казался хорошим кандидатом, чтобы справиться с этим.

Поскольку нам просто нужно показывать по одному сообщению об ошибке за раз, мы можем просто сохранить этот message (строку) и код status в контексте. Функции добавления и удаления (очистки) ошибки также отображаются в контексте через поставщика.

Нам нужно добавить наш APIErrorProvider в значительной степени, мы добавляем других провайдеров, таких как Authentication provider или Material ui, в наш основной компонент приложения.

Обратите внимание, что мы также добавляем сюда APIErrorNotification компонент, который будет отображать всплывающее уведомление с ошибкой.

Используйте свой собственный хук и избегайте использования useContext в каждом компоненте

Пользовательский хук useAPIError не делает ничего особенного, но делает код более читаемым и позволяет избежать написания слишком большого количества строк. Он предоставляет функции addError и removeError и error, используемые APIErrorNotification.

Теперь мы можем использовать наш настраиваемый хук на странице функций, например, в следующем примере. Здесь мы делаем запрос к API, когда компонент монтируется (useEffect без зависимостей). Если запрос не выполняется, мы вызываем метод addError в нашем Provider, и контекст обновляется.

После обновления контекста APIErrorNotification получает уведомление об изменении его значения и повторный рендеринг. Мы можем показать сообщение в абзаце (или разметке, почему бы и нет?), Использовать модальное окно, тост / закусочную или другое. В этом случае представьте, что у нас есть модальный компонент, который появляется только при возникновении ошибки:

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

Мы собираемся использовать @ testing-library / react в следующих примерах. Он действительно прост в использовании, и вся идея состоит в том, чтобы протестировать как пользователь, что помогает идентифицировать варианты использования и соответствовать критериям приемлемости пользователя. Также существует библиотека react-hooks-testing-library, которая может помочь протестировать наши собственные хуки.

Из этого примера вы можете увидеть, что:

  • Мы можем передать собственное сообщение об ошибке или просто использовать имитацию;
  • Мы расширяем функции, предоставляемые @testing-library/react (getByTestId, queryByTestId и т. Д.), Что означает, что мы правильно тестируем addErrorSpy и removeErrorSpy использование.

Чтобы использовать его в тесте, мы можем сделать следующее:

Например, если мы добавим атрибут data-testid к кнопке отправки в компоненте APIErrorNotification, мы можем активировать его и подтвердить, что removeErrorSpy был вызван при нажатии кнопки.

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

Мы надеемся, что это дало некоторые идеи о том, как использовать Context API и как тестировать ваши варианты использования. Удачного кодирования!