LogoLogo
  • Welcome
  • What's new?
  • Docs
    • User guides
      • Get Started
      • Kepler.gl workflow
        • Add data to layers
          • Adding Data Layers
          • Create a Layer
          • Blend and Rearrange Layers
          • Hide, Edit and Delete Layers
        • Add Data to the Map
      • Layers
        • Point
        • S2 Layer
        • Icon
        • Line
        • Cluster
        • Polygon
        • Hexbin
        • Grid
        • H3
        • Heatmap
        • Arc
        • Trip layer
      • Layer Attributes
      • Color Palettes
      • Filters
      • Map Styles
      • Interactions
      • Map Settings
      • Time Playback
      • Save and Export
      • FAQ
    • API Reference
      • ecosystem
      • Get Started
      • Advanced usages
        • Saving and Loading Maps with Schema Manager
        • Replace UI Component with Component Dependency Injection
        • Forward Dispatch Actions
        • Reducer Plugin
        • Using Updaters
        • Custom reducer initial state
        • custom-mapbox-host
      • Components
      • Reducers
        • reducers
        • map-style
        • map-state
        • combine
        • overview
        • ui-state
        • vis-state
      • Processors
        • All processors
      • Schemas
      • Actions
        • All actions
      • Cloud providers
        • Provider
      • Custom theme
      • Localization
    • Jupyter Notebook
  • Examples
    • Node/Express
    • Demo App
    • Open modal
    • Open modal
    • UMD client
    • Customize kepler.gl Theme
    • Customize kepler.gl Reducer
  • Contributing
    • Developing Kepler.gl
    • Contributor Covenant Code of Conduct
  • Change Log
  • Upgrade Guide
Powered by GitBook
On this page
  • Reducers
  • KeplerGl Reducer
  • Instance Reducer
  • Subreducer

Was this helpful?

  1. Docs
  2. API Reference

Reducers

PreviousComponentsNextreducers

Last updated 6 months ago

Was this helpful?

Reducers

Kepler.gl is a redux-connected component that utilizes redux to manage its state. The basic implementation of kepler.gl reducer is simple. However, to make the most of it, it's recommended to have basic knowledge on:

  • state container

Compose-reducer

It is immportant to understand the relationship between kepler.gl reducer, instance reducer and subreducer. Kepler.gl reducer is the root reducer that combines multiple instance reducer, which manages the state of each individual kepler.gl component. The instance reducer is consists of 4 subreducers, each manages an independent part of the state.

KeplerGl Reducer

To connect kepler.gl components to your Redux app you'll need the following pieces from the kepler.gl package:

  • Redux Reducer: keplerGlReducer imported from @kepler.gl/reducers

  • React Component: KeplerGl imported from @kepler.gl/components

These are the only 2 pieces you need to get kepler.gl up and running in your app. When you mount kepler.gl reducer in your app reducer (with combineReducers), it will then managers ALL KeplerGl component instances that you add to your app. Each kepler.gl instance state is stored in a instance reduccer.

For instance, if you have 2 kepler.gl components in your App:

import KeplerGl from '@kepler.gl/components';

const MapApp = () => (
  <div>
    <KeplerGl id="foo"/>
    <KeplerGl id="bar"/>
  </div>
);

Your redux state will be:

state = {
  keplerGl: {
    foo: {},
    bar: {}
  },
  // ... other app state
  app: {}
}

Instance Reducer

Each kepler.gl component state is stored in a instance reduccer. A instance reducer has 4 subreducers. visState, mapState, mapStyle and uiState. Each of them managers a piece of state that is mostly self contained.

  • visState - Manages all data and visualization related state, including datasets, layers, filters and interaction configs. Some of the key updaters are updateVisDataUpdater, layerConfigChangeUpdater, setFilterUpdater, interactionConfigChangeUpdater.

  • mapState - Manages base map behavior including the viewport, drag rotate and toggle split maps. Key updates are updateMapUpdater, toggleSplitMapUpdater and togglePerspectiveUpdater.

  • mapStyle - Managers base map style, including setting base map style, toggling base map layers and adding custom base map style.

  • uiState - Managers all UI component transition state, including open / close side panel, current displayed panel etc. Note, ui state reducer is the only reducer that’s not saved in kepler.gl schema.

Subreducer

The subreducers - visState, mapState, mapStyle and uiState - are assembled by a list of action handlers, each handler mapped to a state transition function named xxUpdater. For instance, here is a snippet of the map state reducer in kepler.gl:

/* Action Handlers */
const actionHandler = {
 [ActionTypes.UPDATE_MAP]: updateMapUpdater,
 [ActionTypes.FIT_BOUNDS]: fitBoundsUpdater,
 [ActionTypes.TOGGLE_PERSPECTIVE]: togglePerspectiveUpdater
};

User can import a specific action handler in their root reducer and use it to directly modify kepler.gl’s state (without dispathcing a kepler.gl action). This will give user the full control over kepler.gl’s component state.

Here is an example how you can listen to an app action QUERY_SUCCESS and call updateVisDataUpdater to load data into kepler.gl.

import keplerGlReducer, {visStateUpdaters} from '@kepler.gl/reducers';

// Root Reducer
const reducers = combineReducers({
 keplerGl: keplerGlReducer,

 app: appReducer
});

const composedReducer = (state, action) => {
 switch (action.type) {
   case 'QUERY_SUCCESS':
     return {
       ...state,
       keplerGl: {
         ...state.keplerGl,

         // 'map' is the id of the keplerGl instance
         map: {
            ...state.keplerGl.map,
            visState: visStateUpdaters.updateVisDataUpdater(
              // you have to pass the subreducer state that the updater is associated with
              state.keplerGl.map.visState,
              {datasets: action.payload}
            )
         }
       }
     };
 }
 return reducers(state, action);
};

export default composedReducer;
Redux
React
React Redux connect