search

PaulLeCam / react-leaflet

React components for Leaflet maps
https://react-leaflet.js.org
Other
5.13k stars 884 forks source link

Flux example ? #16

Closed moimael closed 9 years ago

moimael commented 9 years ago

Hi,

I started to use your react-leaflet component (works well for now :)) and wanted to know how to integrate it with react + flux. How should the state be handled ? Creating a separate store for leaflet (which feels weird since leaflet handle his own state) ? Do you provide any convenient method to be able to separate state from view ?

Thanks !

luqmaan commented 9 years ago

As an example, I use react-leaflet with Flux: https://github.com/luqmaan/instabus-react/blob/master/client/js/components/MapSection.react.jsx

I need to use some Leaflet plugins like https://github.com/Leaflet/Leaflet.label, so I had to copypasta the source for Marker and modify its componentWillMount: https://github.com/luqmaan/instabus-react/blob/master/client/js/components/StopMarker.react.jsx#L22-L30.

Instabus displays transit data, so it uses Leaflet to display vehicles, stops and polylines along a route. I have a StopStore, VehicleStore, RouteStore and PolylineStore: https://github.com/luqmaan/instabus-react/blob/master/client/js/stores/.

image

moimael commented 9 years ago

Your example is really helpful thanks !

I'm still unsure how to call method on map itself. For example, what if I want to call locate on my instance of Leaflet.Map ? Where should I do it ?

I understand the way flux works, but with third-party component which include their own state and event system, I really have a hard time figuring out how to cleanly integrate them.

PaulLeCam commented 9 years ago

Hi!

Really depends on your use case, but if you are using Flux, your components should simply render the state of the app, not hold it. There is no major difference using React-Leaflet or components manipulating the DOM, all you need to do is listen to events, dispatch actions, handle your state in the stores and render your components based on their state.

You can have a look at the "events" example that listens to an event on the map to update its own state. Using Flux, it would dispatch an action instead of setting its state directly, and get its state from the related store.

moimael commented 9 years ago

Thanks a lot ! It's starting to take shape :)