Из названия этого блога некоторые из вас, ребята, могли догадаться, какова тема этого блога. В этом блоге я расскажу о декомпозиции компонентов диалогов и о внедрении Redux.
Несколько недель назад я обсуждал архитектуру диалогов реагирования с Юлией (разработчик инструментов разработки в Mozilla) и после краткого обсуждения быстро понял, что мне нужно упростить существующие диалоги реагирования. Раньше я думал, что диалоги реагирования достаточно просты, чтобы избежать Redux, но после обсуждения я решил использовать его в диалогах реагирования.
Разложение диалогов React
Некоторые компоненты диалогов обрабатывали слишком много вещей, и это затрудняло их чтение. Я сделал шаг назад от кода и переработал архитектуру компонентов на бумаге. Я пытался заставить каждый компонент выполнять только одну работу.
Я немного боялся разбивать компоненты на слишком много подкомпонентов, поскольку с каждым новым тегом скрипта время загрузки диалога увеличивается. Мы не используем какой-либо инструмент для связывания, поэтому я должен убедиться, что разлагаю компоненты в нужном количестве.
Введение Redux
Использование состояния React и наличие хорошей декомпозированной структуры приложения иногда увеличивает сложность приложения. Передача состояния и методов через свойства громоздка, а также затрудняет чтение кода. Хотя Redux поставляется с большим количеством шаблонов, но удобство, которое он предоставил, стоит первоначальных усилий по настройке. Используя Redux, я смог отделить логику метода acceptDialog от React, о чем также просил Phillip(Mentor). Я думаю, что компоненты диалога теперь намного более читабельны и менее сложны.
Новые диалоги — диалог событий и диалог задач
Я также создал еще два диалога и добавил избыточность. Эти диалоги, вероятно, самые большие из всех диалогов молнии. Им нужно несколько пользовательских компонентов, таких как средство выбора даты и т. д. В настоящее время мы используем элемент input[type="date"]. В Firefox мы можем включить всплывающее окно ввода даты, изменив несколько настроек в about:config. Ниже приведены скриншоты диалогового окна «Событие и задача».
Не стесняйтесь комментировать и делиться своими взглядами. Посмотреть все эти диалоги можно здесь. Спасибо за чтение!
Ознакомьтесь с другими блогами из серии проектов Convert XUL to HTML —
Часть 1: Первые шаги — преобразование XUL в HTML
