{"action":"created","issue":{"url":"https://api.github.com/repos/rackt/redux/issues/1279","labels_url":"https://api.github.com/repos/rackt/redux/issues/1279/labels{/name}","comments_url":"https://api.github.com/repos/rackt/redux/issues/1279/comments","events_url":"https://api.github.com/repos/rackt/redux/issues/1279/events","html_url":"https://github.com/rackt/redux/issues/1279","id":128675805,"number":1279,"title":"Have any suggestions for where to put something like an Esri or Leaflet Map object in Flux architecture?","user":{"login":"Robert-W","id":1177959,"avatar_url":"https://avatars.githubusercontent.com/u/1177959?v=3","gravatar_id":"","url":"https://api.github.com/users/Robert-W","html_url":"https://github.com/Robert-W","followers_url":"https://api.github.com/users/Robert-W/followers","following_url":"https://api.github.com/users/Robert-W/following{/other_user}","gists_url":"https://api.github.com/users/Robert-W/gists{/gist_id}","starred_url":"https://api.github.com/users/Robert-W/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Robert-W/subscriptions","organizations_url":"https://api.github.com/users/Robert-W/orgs","repos_url":"https://api.github.com/users/Robert-W/repos","events_url":"https://api.github.com/users/Robert-W/events{/privacy}","received_events_url":"https://api.github.com/users/Robert-W/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2016-01-25T23:43:38Z","updated_at":"2016-01-26T18:05:41Z","closed_at":"2016-01-26T16:09:23Z","body":"Do you have any suggestions for how to handle a mutable map object that manages it's own state and controls it's own rendering (to canvas or appending images as map layers) in a flux architecture? I know you require your stores to be essentially immutable which is why I am not sure where to put this.\r\n\r\nTypically where I work we build our UI in React and use Flux to model our UI state (currently using Alt but I want to switch to Redux). We are however primarily an Esri shop so almost all of our applications use [Esri's JSAPI](https://developers.arcgis.com/javascript/jssamples/map_simple.html) and we frequently have to interact with the map object to add/remove/show/hide layers/graphics, apply definitions, do queries, etc.\r\n\r\nWe have come up with two approaches but was curious what you guys think or if you know of a better approach.\r\n\r\nOne method is to put the map object in the store, and then make changes to it using esri's api and route all of our functionality through actions, so we can emit change events anytime we interact with it and then derive our UI state from this map object. However we are just storing a reference to the map in the store and mutating it every time(we can't not mutate it because of how their api works) and this can get complex because not all UI can be derived directly from the map easily. It often requires parsing strings from arrays or deeply nested json objects which can be error prone.\r\n\r\nThe other method we have used is to store the map in the global scope under an app variable and take it out of flux completely.  We then store a minimal amount of information about the map in the stores, just enough so we can render the UI (so things like which layers are visible and the state of their controls). We then interact with the map object after the store changes using the functions that are subscribed to the store.  This way the store is immutable but we are duplicating a little bit of data.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/rackt/redux/issues/comments/175147142","html_url":"https://github.com/rackt/redux/issues/1279#issuecomment-175147142","issue_url":"https://api.github.com/repos/rackt/redux/issues/1279","id":175147142,"user":{"login":"markerikson","id":1128784,"avatar_url":"https://avatars.githubusercontent.com/u/1128784?v=3","gravatar_id":"","url":"https://api.github.com/users/markerikson","html_url":"https://github.com/markerikson","followers_url":"https://api.github.com/users/markerikson/followers","following_url":"https://api.github.com/users/markerikson/following{/other_user}","gists_url":"https://api.github.com/users/markerikson/gists{/gist_id}","starred_url":"https://api.github.com/users/markerikson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/markerikson/subscriptions","organizations_url":"https://api.github.com/users/markerikson/orgs","repos_url":"https://api.github.com/users/markerikson/repos","events_url":"https://api.github.com/users/markerikson/events{/privacy}","received_events_url":"https://api.github.com/users/markerikson/received_events","type":"User","site_admin":false},"created_at":"2016-01-26T18:05:41Z","updated_at":"2016-01-26T18:05:41Z","body":"@Robert-W : you may want to take a look at https://github.com/lelandrichardson/react-native-maps and https://github.com/mapbox/react-native-mapbox-gl .  Those both appear to be good implementations of React components wrapping JS map libraries."}}