React-mapbox-gl: Map reloaded on props changed

[rofrol]

In redux reducer when I have this:

    case SELECT_POI_MARKER: {
      return {
        ...state,
        selected: action.poi,
      };
    }

And set selected to null, map gets reloaded.

When I change code to this:

    case SELECT_POI_MARKER: {
      return Object.assign(state, { selected: action.poi });
    }

map isn't reloaded, but Popup doesn't show up, Map does not receive prop changes.

[alex3165]

Hi @rofrol the 2 following code snippets doesn't behave the same way. The first one return a new reference of object and the second one mutate your state, if you want to achieve the same with Object.assign you have to do:

    case SELECT_POI_MARKER: {
      return Object.assign({}, state, { selected: action.poi });
    }

[rofrol]

@alex3165
Ok, I've changed code to return Object.assign({}, state, { selected: action.poi });, but the problem is the maps get reloaded.

Also when I click on marker to show Popup, maps gets reloaded and then Popup is shown.

[alex3165]

@rofrol Could you reproduce the issue with a minimal setup using this webpackbin template: https://www.webpackbin.com/bins/-KqtJN-qkLs4BPaVX0QS

[rofrol]

Got it. After extracting this code:

const mapBoxConfig = __MAPBOX__;
const MapBox = ReactMapboxGl({ accessToken: mapBoxConfig.accessToken });

out of render function, it works.