ReactMap_changeState.js

import Immutable from 'immutable';

export default function StylesheetReducer(styleState = null, action) {

  switch(action.type){
    /* ... */
      
    /* Other reducer cases exist here */
      
    /* ... */      
    case 'CHANGE_VIZ': {
      // LAYER_ID will be the name of layer
      // in your style you wish to modify:
      const LAYER_ID = 'buildings';
      
      // Immutable has convenient syntax for 
      // finding that layer's index from the 
      // list of layers in the style:
      const layerIdx = styleState.get('layers').findIndex(layer => layer.get('id') === LAYER_ID);
      let paint = {}; // <= not a constant, dont use elsewhere in this scope
      
      // The payload will contain the event.target.value of
      // the button clicked, in this case 'sqft' or 'units':
      switch(action.payload) {
        case 'sqft':
          // This will color the buildings by their total area,
          // in a smooth gradient between 500sf (light blue) and
          // 100,000sf (dark blue)
          paint.property = 'BLDG_SQFT';
          paint.type = 'exponential';
          paint.stops = [[500, '#f7fbff'],[100000, '#084594']]
          break;
        case 'units':
          // This will color the buildings by number of residences,
          // in a smooth gradient between 10 units (light blue) and
          // 200 units (dark blue)
          paint.property = 'UNITS_RES';
          paint.type = 'exponential';
          paint.stops = [[10, '#f7fbff'],[200, '#084594']]
          break;
        default:
          // in edge cases, color everything dark blue
          paint = '#084594';
      }
      
      // Again, Immutable provides a very convenient way to update
      // a deeply nested property. We're access the list of layers,
      // finding the index of our layer, getting the paint object, 
      // and setting its fill-extrusion-color property to our new value
      const newStyle = styleState.updateIn(['layers', layerIdx, 'paint'], property => {
        return property.set('fill-extrusion-color', paint);
      });
      return newStyle
    }

    default: return styleState;
  }
}