Custom reducer initial state

Search…
For advanced users who wish to modify the initial state of kepler.gl reducer, kepler.gl provides a reducer initialState function. Reducer.initialState will take the custom state and return a new reducer function. initialState is only meant to be called where the store is initialized. The custom state passed in will be shallow merged with the default initialState.
Here is an example modify uiState initialState to hide side panel, and selectively display map control button.
1
import {combineReducers} from 'redux';
2
import keplerGlReducer from 'kepler.gl/reducers';
3
​
4
const customizedKeplerGlReducer = keplerGlReducer
5
  .initialState({
6
    uiState: {
7
      // hide side panel to disallow user customize the map
8
      readOnly: true,
9
​
10
      // customize which map control button to show
11
      mapControls: {
12
        visibleLayers: {
13
          show: false
14
        },
15
        mapLegend: {
16
          show: true,
17
          active: true
18
        },
19
        toggle3d: {
20
          show: false
21
        },
22
        splitMap: {
23
          show: false
24
        }
25
      }
26
    }
27
  });
28
​
29
const reducers = combineReducers({
30
 keplerGl: customizedKeplerGlReducer,
31
 app: appReducer
32
});
Copied!
For full implementation, take a look at the custom reducer example​
Using Updaters
custom-mapbox-host
Last modified 1yr ago
Copy link