Инструмент разработчика Chrome для отслеживания и визуализации изменений состояния в приложениях React

Управление состоянием - один из наиболее важных аспектов при создании приложений React. Растущая популярность React Hooks и Context API предоставила более простое и легкое решение для использования централизованных библиотек управления состоянием, таких как Redux. С растущим сдвигом в сторону альтернативного управления состоянием вы можете задаться вопросом, как можно легко отслеживать и визуализировать изменения состояния.

Ответ: Reactime!

Представляем бета-версию Reactime 2.0

Reactime - это инструмент разработчика Chrome с открытым исходным кодом, вдохновленный Redux DevTools и предназначенный для помощи разработчикам в отладке приложений React путем отслеживания и визуализации изменений состояния. Это позволяет разработчику вернуться к любому ранее записанному состоянию, упрощая отладку состояния, особенно при масштабировании приложения.

Первоначально Reactime поддерживал только компоненты с отслеживанием состояния, которые разделяли состояние при бурении опоры; однако теперь он имеет бета-поддержку Context API, условной маршрутизации и useState Hook, чтобы удовлетворить растущий спрос на функциональные компоненты и полагаться на Context API, чтобы минимизировать детализацию опоры.

Как это работает?

Последняя бета-версия Reactime работает, записывая моментальные снимки состояния всякий раз, когда оно изменяется, что позволяет разработчику вернуться к любому ранее записанному моментальному снимку. В режиме воспроизведения он будет перебирать записанные снимки, поэтому вы можете легко визуализировать шаги для отладки.

Reactime поставляется с визуализатором, использующим D3, предоставляя древовидный график, иллюстрирующий изменения состояния, и функции наведения / масштабирования на каждом узле, чтобы увидеть изменения во всех деталях. Кроме того, Reactime вычисляет и предоставляет разницу между каждым снимком и фиксирует изменения состояния в виде загружаемого JSON.

Как помогает Reactime

С появлением тенденции к контекстному API, хукам и функциональным компонентам в React, Reactime добавил функции для поддержки постоянно растущего сообщества React, чтобы упростить процесс отладки для альтернативного управления состоянием.

Команда Reactime очень довольна своей последней бета-версией, и если вам интересно, посетите нашу страницу GitHub и попробуйте наше расширение.