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 kepler.gl’s state without dispatching the action. This will give user a lot of freedom to control over kepler.gl's state transition.

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

// action and forward dispatcher
import {togglePerspective} from '@kepler.gl/actions';

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

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

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

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

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

export default composedReducer;