Я часто работаю в React, чтобы создать внешний интерфейс своих приложений, что означает, что у меня есть выбор из сотен библиотек пользовательского интерфейса. Один из наших текущих проектов основан на страховых и судебных технологиях. Приложение было довольно сложным, поэтому у него были сложные пользовательские потоки и множество повторно используемых компонентов. Поэтому после должной осмотрительности и тщательного анализа требований мы решили использовать Material UI (MUI) для создания внешнего интерфейса нашего приложения.
Переходя от системы Ant Design к MUI, поначалу кажется, что нужно написать много кода для выполнения простой задачи, например, формы — без готового компонента для работы с формами. Интересная привычка, которую я выработал с помощью Ant, заключалась в использовании императивного стиля написания простой логики, такой как использование хуков useMessage, useNotification для отображения сообщений и уведомлений. Но MUI не предоставляет никаких готовых решений. Немного погуглив, я наткнулся на библиотеку notistack, которая позволяет реализовать этот стиль. Но бандлфобия — это вещь! И я также хочу уменьшить занимаемую площадь моего модуля. Имея это в виду, я решил создать базовый императивный API для решения этой задачи.
Я создал простой компонент под названием AppContext, который находится в каталоге src.
Это покажет компонент закусочной, какой бы компонент ни вызывал хук useMessage. Проверьте приведенный ниже код на хук useMessage.
Это ванильная версия хука useMessage. Вы можете настроить его как хотите, передав параметры, расширяющие SnackbarProps. Теперь вы можете вызвать этот хук в любом месте вашего компонента следующим образом:
Вы, должно быть, заметили, что мы используем хранилище Redux для управления логикой отображения нашей закусочной, теперь давайте посмотрим, как мы настроили его с помощью Redux.
Наконец, мы добавили компонент AppContext в наш корневой компонент следующим образом:
Это простой и интуитивно понятный способ создания API в императивном стиле с использованием хуков React для отображения сообщений. Интересный факт о компоненте AppContext: вы можете использовать шаблон провайдера в React и обернуть компонент приложения внутри AppContext. Я не стал этого делать, чтобы избежать путаницы, так как Context API также оборачивает компонент приложения, а мы используем Redux. Вы также можете добавить хуки для управления открытыми диалоговыми окнами, обработки асинхронной логики внутри AppContext и поддержания чистоты отдельных компонентов, что также обеспечит возможность повторного использования.
Норайз — инженер-программист в компании Красный буфер.
