Ich verwende React und Redux, um meine App zu erstellen. Jetzt möchte ich eine Mapbox-GL-Map in eine der Komponenten einbetten und einige Status in meinem Redux erstellen, um den Status der Map widerzuspiegeln.Wie verwende ich Mapbox GL mit React und Redux?
Was ist der beste Weg, um meine React Redux App mit Mapbox GL zu kombinieren, so dass meine React Elemente mit der Map interagieren können?
Ich würde damit beginnen, die verschiedenen Verantwortlichkeiten von React und Redux zu berücksichtigen (weil sie sehr unterschiedliche Werkzeuge sind).
gebaut React ist auf der Web-Komponenten machen zu helfen. Sie können damit wirklich tolle, komplizierte UI-Elemente erstellen.
Die meisten Mapping-Bibliotheken (Mapbox, Leaflet) sind jedoch von Natur aus sehr komplex. Sie behandeln ihre eigenen Rendering-Zyklen ziemlich gut.
Die derzeit gängige Praxis besteht darin, die Zuordnungsbibliothek in eine react-Komponente zu verpacken, sodass Sie sie in der Reaktionshierarchie Ihres Projekts verwenden können, aber das Rendern innerhalb der Zuordnung an die Zuordnungsbibliothek delegieren.
Der Wrapper kann so einfach sein wie etwas, das <div ref="mbMap" /> darstellt, und Sie können die Funktionen Ihrer Kartenbibliothek auf der Kartenreferenz selbst verwenden und die Komponentenaktualisierungen über die lifecylce-Methoden wie steuern.
Es ist in der Regel eine sichere Wette machen state === data zu denken, und die meisten der Komplexität in einer Komponente Daten (man denke an die Bildkacheln in einer Karte zum Beispiel). Damit die Redox-Theorie funktioniert, muss der Zustand jedoch als einfache Objekte und serialisierbar dargestellt werden, was bei den meisten Map-Bibliotheken nicht der Fall ist.
Es gibt einige anständige frühere Forschung auf nur das redux Stück Ihrer Frage (see this conversation).
Die allgemeine Regel von Thump ist, die Daten zu behalten, die Sie benötigen, um die Karte im Redux-Statusbaum auf ihren aktuellen Status zurückzusetzen. Beispiele wären Zoomstufe, Ebenen, Orte usw., aber nicht die map/vector/svg-Daten selbst.
Auf diese Weise können Sie Aktionen versenden, die die Änderung in Ihren Apps Daten darstellen, die Sie vornehmen möchten, die wiederum das native Rendering der Kartenbibliothek aufrufen.
Denken:
state = {
mapZoom: { boundaries: [lat, lng], zoomLevel: 5},
pokeStops: {...layers },
};
und versenden Sie eine Aktion auf eine Schaltfläche, die den Staat auf ein neues mapZoom Objekt reduziert. Dieser neue Status löst die native Mapping-Bibliothek aus, die in der react-Komponente in etwas wie map.zoomTo(this.props.mapZoom) eingeschlossen ist.