[ReactJS] Управление состоянием mapbox-gl в React
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Описание проблемыВ процессе моей работы в geoalert.io я не раз сталкивался с проблемой управления состоянием приложения на React со встроенной картой mapbox-gl.Я планирую посвятить теме цикл из трех статей, включая эту:
- Управление состоянием mapbox-gl в React
- Встраивание mapbox-gl в React
- Управление состоянием React приложения сmapbox-gl с использованием XState
Две последние указанные статьи соответствуют 2 основным проблемам с которыми я столкнулся в процессе использования mapbox-gl в React
- Встраивание mapbox-gl в React - хранение встроенного инстанса mapbox-gl и организация доступ к нему из других компонентов приложений
- Управление состоянием приложения React с mapbox-gl- так какmapbox-gl имеет внутреннее состояние, необходимо синхронизировать его с состоянием самого приложения
Встраивание mapbox-gl в ReactЕсть несколько вариантов решения данной задачи, вот наиболее популярные среди них:
- Использование готовых библиотек-оберток
- Самостоятельная нативная интеграция, для этого варианта я бы выделил 2 случая
- Имплементация в виде компонента React
- Хранение инстанса карты вне React
Использование готовых библиотек-обертокНаиболее популярные среди них:
- react-map-gl - решение от uber, пожалуй самое навороченное среди прочих, один из главных недостатков:
- Steep learning curve, имея достаточно богатый функционал, в том числе для управления состоянием, достаточно сложно разобраться в api библиотеки
- Имеет почти 1мб размер бандла что весьма много
- react-mapbox-gl - занимает второе место по популярности, имеет на порядок меньший размер бандла и более лаконичный и простой для понимания api
- @urbica/react-map-gl - по размеру бандла и api находится примерно на одном уровне с react-mapbox-gl
- use-mapbox-gl - пользуясь случаем приложу свое решение, это легковесный React hook обертывающий mapbox-gl
Самостоятельная нативная интеграцияИмплементация в виде компонента ReactОсновная идея данного подхода - создание компонента веб-карты, который должен содержать dom node для инициализации карты, логику инициализации, так же он должен хранить инстанс созданной карты.В документации mapbox-gl есть инструкция как это сделать для нового приложения на React Use Mapbox GL JS in a React app | HelpПродолжение и более подробное рассмотрение данного вопроса, с различными примерами реализации, ждите в следующей статье цикла.Хранение инстанса карты вне ReactПример подобной реализации будет также рассмотрен в следующей статьеУправление состоянием React приложения с mapbox-gl с использованием XStateКак правило туториалы по использованию mapbox-gl в React заканчиваются после того как описан способ интеграции первого во второе, артикли об управлении состоянием в подобных приложениях встречаются редко, большинство артиклей на эту тему на данный момент устарели.Вот, например, неплохая статья от @Cole Beese.An approach to integrating MapboxGL in React / Redux.В данном артикле описан пример управления состоянием с помощью Redux с использованием классовых компонентов React.Как уже упоминалось выше, mapbox-gl имеет внутреннее состояние, например такие свойства как:
- Координаты центра карты
- Зум
- Наклон
- Текущий стиль карты
- Векторные или растровые пользовательские слои
- и т.п.
Как правило в интерфейсе приложения помимо самой карты есть элементы отображение которых зависит от внутреннего состояния карты, например элемент отображающий текущий координаты и зум, как в упомянутом выше примере:
Помимо состояния внутри инстанса карты в приложении так же может быть свое внутреннее состояние, в нашем случае для этого будет использоваться XState.Я рассмотрю это более подробно на примере использования XState в своем следующем посте.
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка веб-сайтов, JavaScript, Программирование, ReactJS, Поисковая оптимизация] Next js. Куда, откуда и причем здесь google?
- [Node.JS, ReactJS] Splunk-react-app или создание дашбордов любой сложности в Splunk
- [Разработка веб-сайтов, JavaScript, Программирование, ReactJS] React испортил веб-разработку (перевод)
- [Разработка веб-сайтов, NoSQL, ReactJS, Serverless] You don't know Redis
- [JavaScript, ReactJS, TypeScript] Готовим селекторы в Redux
- [JavaScript, ReactJS] За что я не люблю Redux
- [CSS, JavaScript, ReactJS, TypeScript] Темизация. История, причины, реализация
- [JavaScript, ReactJS] React. Не в глубь, а в ширь. Композиция против реальности
- [Angular, ReactJS, TypeScript] Почему мы должны выбросить React и взяться за Angular (перевод)
- [Разработка мобильных приложений, ReactJS] Десятикратное улучшение производительности React-приложения (перевод)
Теги для поиска: #_reactjs, #_reactjs, #_mapbox, #_state_management, #_reactjs
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:27
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Описание проблемыВ процессе моей работы в geoalert.io я не раз сталкивался с проблемой управления состоянием приложения на React со встроенной картой mapbox-gl.Я планирую посвятить теме цикл из трех статей, включая эту:
 Помимо состояния внутри инстанса карты в приложении так же может быть свое внутреннее состояние, в нашем случае для этого будет использоваться XState.Я рассмотрю это более подробно на примере использования XState в своем следующем посте. =========== Источник: habr.com =========== Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:27
Часовой пояс: UTC + 5