Мотивация
Итак, вы слышали о новой захватывающей библиотеке управления состоянием Facebook, Recoil, и хотите реализовать ее в своих собственных приложениях React. К сожалению, Recoil настолько нова, что на нем не так много ресурсов, как для Redux, MobX и т. Д. Recoil и его система выбора атомов - фантастическое решение для управления состоянием, но оно представляет некоторые технические проблемы. при работе со сложными приложениями React производственного уровня. Что, если бы существовал инструмент разработки Recoil, который интегрируется с React DevTools для анализа приложения React и визуализации интуитивно понятного, динамического дерева компонентов со всеми данными о взаимосвязи атом-селектор?
Отдача
Recoil - это экспериментальная библиотека управления состоянием с открытым исходным кодом, созданная для React и разработанная Facebook. Он использует атомы и селекторы для передачи состояния по всему приложению, одновременно повышая производительность за счет предотвращения ненужных повторных отрисовок. Это элегантное решение проблемы управления состоянием, которое в ближайшем будущем должно стать неотъемлемой частью набора инструментов каждого разработчика React.
Решение
Наша команда разработала Atomos, новый инструмент разработчика Chrome с открытым исходным кодом, разработанный специально для Recoil. Atomos легко интегрируется с React DevTools, чтобы обеспечить визуализацию в реальном времени и облегчить планирование и отладку структуры и состояния приложения React / Recoil. Другими словами, Atomos анализирует приложение Recoil и визуализирует чистое, интуитивно понятное дерево компонентов, созданное с помощью React Flow, которое выборочно выделяет компоненты, чтобы показать, как атомы и селекторы передают данные через приложение. Atomos экономит время и энергию разработчиков, избавляя от необходимости строить догадки в процессе отладки управления состоянием.
Возможности
- Чистый и удобный для чтения пользовательский интерфейс, разработанный с помощью React Flow
- Динамически обновляется при изменении состояния
- Отслеживает создание и удаление компонентов
- Отображает только те компоненты, которые в настоящее время визуализируются.
- Легко интегрируется с React Devtools - не нужно загружать пакет npm
- Функциональность перетаскивания для настройки макета дерева компонентов
- Определяет отношения атома и селектора
- Выпадающие меню отображают все атомы и селекторы в приложении.
- Отслеживает атомы и селекторы и выборочно выделяет их по всему дереву компонентов
Почему это важно
Atomos помогает разработчикам согласовать свою ментальную модель того, как приложение должно управлять состоянием, с тем, что на самом деле происходит в коде. Atomos позволяет разработчикам изолировать отдельный атом или селектор и отслеживать его прохождение состояния по дереву компонентов. Затем они могут протестировать приложение и убедиться, что состояние передается правильно в режиме реального времени. Это обеспечит более стабильный, производительный код, меньшее время, затрачиваемое на отладку, и более быстрые циклы разработки.
Будущее
В будущем мы надеемся расширить функциональные возможности Atomos и превратить его в комплексный инструмент отладки с управлением состоянием. Вот некоторые функции, которые мы запланировали:
- Предоставление пользователям возможности создавать собственные деревья планирования, а затем сравнивать дерево, визуализированное приложением, со своим деревом планирования.
- Включение других форм управления состоянием, таких как props, React Hooks и Context API
- Разрешить пользователям делать снимки дерева компонентов, сохранять их в приложении и делиться ими с другими пользователями
- Расширение узлов React Flow для отображения значений атомов и тела функций селекторов
Благодарим вас за чтение и не стесняйтесь опробовать Atomos, посетив наш репозиторий GitHub ниже!
Авторы
Сумин Ким - @LinkedIn - @GitHub
Джонатан Мендоса - @LinkedIn - @GitHub
Коул Редферн - @LinkedIn - @GitHub
GitHub
Https://github.com/oslabs-beta/atomos
