Redux for use in mapping applications

Question

I know that redux is great for handling the global state of an application, and when that state is updated to reflect that in the view. However, is it possible to use it on a react component that shouldn't re-render? I have a map which uses leaflet and rather than re-render and plot the data, I want it to plot the data without re-rendering.

Does redux seem like a good choice? If so, where would I handle api calls as I was told it should not be done in the reducer.

Currently my app consists of a nav bar, a fullscreen map and a search menu which is populated from an api request. The idea is that when a search is selected it populates data onto the map.

Answer 1

Can you share how you're using Leaflet and React without Redux?

Essentially, React components will always re-render if their state changes, so you can either have a React component that updates on every change, or a Redux-connected component that updates on every subscribed state change. Doesn't make a difference either way.

If you want React/Redux to be 'aware' of your leaflet widget, the only way to do that is to have it re-render on change. Bear in mind that a 'render' function doesn't just throw away and rebuild that part of the DOM, so re-rendering on every change won't cause your leaflet component to be destroyed and rebuilt.

You could connect the Redux dispatcher but not the state, so that you can publish changes to your server through redux, but not have the state connected. This doesn't seem like the ideal approach to use though.

Another approach is to have a 'persistedMapCoordinates' property that is only set when the user confirms their selection, but not on every change. That way the re-render only happens when they lock in their change, not on every small adjustment.

For doing the API calls, you'll want to use redux thunk and middleware. There is tons of info about this available online :)

Answer 2

If your component doesn't re-render, then I'd suggest not complicating it with Redux. It sounds like you just need a component that manages its own rendering.

var MyMapComponent = React.createClass({
  componentWillMount: function() {
    fetch('/some/data')
     .then(this.update);
  },
  update: function(data) {
    // calling setState will trigger shouldComponentUpdate
    this.setState({ data: data });
  },
  loadMap: function(container) {
    // calling setState will trigger shouldComponentUpdate
    this.setState({
      map: L.map(container)
    });
  },
  shouldComponentUpdate: function(nextProps, nextState) {
    var map = this.state.map;
    var data = this.state.data;

    // make updates to map here

    // prevent react from re-rendering this component
    return false;
  },
  render: function() {
    // pass a reference to the dom node out to loadMap
    return (
      <div ref={this.loadMap}></div>
    );
  }
});