Using Updaters

Search…
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(
            t  state.keplerGl.foo.mapState
            )
         }
       }
     };
 }
 return reducers(state, action);
};
​
export default composedReducer;
Reducer Plugin
Custom reducer initial state
Last modified 2yr ago
Copy link