Using Updaters

Updaters are state transition functions that mapped to actions. One action can map to multiple state updaters, each belongs to a subreducer.

This action-updater pattern allows a user to import a specific action updater in the app's root reducer and use it to directly modify’s state without dispatching the action. This will give user a lot of freedom to control over's state transition.

To achieve the same result with togglePerspective updating's map perspective mode. You can import and dispatch action togglePerspective:

// action and forward dispatcher
import {togglePerspective} from '';

const MapContainer = ({dispatch}) => (
    <button onClick={() => dispatch(togglePerspective())} />
    <KeplerGl id="foo"/>

or import the corresponding updater mapStateUpdaters.togglePerspectiveUpdater and call it inside the root reducer. The example below demos how to add a button outside component, and update the map perspective when click it.

import keplerGlReducer, {mapStateUpdaters} from '';

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

const composedReducer = (state, action) => {
 switch (action.type) {
   case 'CLICK_BUTTON':
     return {
       keplerGl: {
         foo: {
            mapState: mapStateUpdaters.togglePerspectiveUpdater(
 return reducers(state, action);

export default composedReducer;

Last updated