如何在React和Redux中使用Mapbox GL？

Question

我正在使用React和Redux來構建我的應用程序。現在我想在其中一個組件中嵌入Mapbox GL地圖，並在Redux中創建一些狀態以反映地圖的狀態。

將我的React Redux應用程序與Mapbox GL結合起來，以便我的React元素可以與地圖進行交互的最佳方式是什麼？

Answer 1

我首先考慮了React和Redux的不同職責（因爲他們是非常不同的工具）。

陣營：建立&渲染UI /組件

反應是專爲幫助呈現在網頁上的組件。你可以用它構建真棒，複雜的UI。

但是，大多數映射庫（Mapbox，Leaflet）本質上是非常複雜的。他們很好地處理自己的渲染週期。

目前流行的做法是將映射庫包裝在反應組件中，以便您可以在項目的反應層次結構中使用它，但是可以將映射內的渲染委託給映射庫。包裝可以像呈現<div ref="mbMap" />那樣簡單，並且您可以在地圖引用本身上使用地圖庫的函數，並且可以通過諸如shouldComponentUpdate的lifecylce方法控制反應組件更新。

終極版：讓狀態管理預見

它通常是一個安全的賭注，認爲state === data和大部分的成分複雜的是數據（覺得像瓷磚的地圖爲例）。然而，對於redux工作的理論，狀態需要被表示爲普通對象和可序列化，而大多數地圖庫不是。

對於您的問題(see this conversation)的還原片，有一些體面的前期研究。

重複通用規則是在redux狀態樹中保留您需要的數據，以將地圖返回到其當前狀態。例子是縮放級別，圖層，位置等，但不是map/vector/svg數據本身。

通過這種方式，您可以分派動作，這些動作代表您想要製作的應用程序數據的變化，然後調用地圖庫的本地渲染。

想：

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

和你發送上的按鈕降低的狀態到一個新的mapZoom目標的行動。該新狀態觸發本地映射庫，並將其封裝在反應組件中，如map.zoomTo(this.props.mapZoom)。