Как использовать Mapbox GL с React и Redux?

Question

Я использую React и Redux для создания своего приложения. Теперь я хочу встроить карту Mapbox GL в один из компонентов и создать некоторые состояния в моем Redux, чтобы отразить статус карты.

Каков наилучший способ объединить приложение React Redux с Mapbox GL, чтобы мои элементы React могли взаимодействовать с картой?

Answer 1

Я бы начал с рассмотрения различных обязанностей React и Redux (потому что они очень разные инструменты).

React: Строительство & Rendering UI/Компоненты

React построен, чтобы помочь визуализации компонентов в Интернете. Вы можете создать действительно потрясающие, сложные части пользовательского интерфейса.

Однако большинство библиотек сопоставления (Mapbox, Leaflet) по сути своей сложны. Они отлично справляются со своими циклами рендеринга.

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

Обертка может быть чем-то таким же простым, как то, что делает <div ref="mbMap" />, и вы сможете использовать функции вашей библиотеки карт на самой ссылке на карту и можете контролировать изменения компонентов, используя методы lifecylce, такие как shouldComponentUpdate.

Redux: сделать государственное управление предсказуемое

Это, как правило, безопасная ставка думать state === data и большую часть сложности в компоненте данных (думаю изображение плитки в карте, например). Однако для того, чтобы теория редукции работала, состояние должно быть представлено как простые объекты и сериализуемое, что большинство библиотек карт нет.

Есть некоторые приличные бывшие исследования только на части редукции вашего вопроса (see this conversation).

Общее правило thump - сохранить нужные данные, чтобы вернуть карту в текущее состояние в дереве состояний редукции. Примерами могут быть уровень масштабирования, уровни, местоположения и т. Д., Но не сами данные map/vector/svg.

Таким образом, вы можете отправлять действия, которые представляют собой изменение данных ваших приложений, которые вы хотите создать, которые, в свою очередь, вызывают собственный рендеринг библиотеки карт.

Думают:

state = { 
    mapZoom: { boundaries: [lat, lng], zoomLevel: 5}, 
    pokeStops: {...layers }, 
    }; 

и вы посылаете действие на кнопку, которая уменьшает состояние на новый объект mapZoom. Это новое состояние запускает собственную картографическую библиотеку, завернутую в компонент реакции на что-то вроде map.zoomTo(this.props.mapZoom).