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:
1
// action and forward dispatcher
2
import {togglePerspective} from 'kepler.gl/actions';
3
​
4
const MapContainer = ({dispatch}) => (
5
  <div>
6
    <button onClick={() => dispatch(togglePerspective())} />
7
    <KeplerGl id="foo"/>
8
  </div>
9
);
Copied!
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.
1
import keplerGlReducer, {mapStateUpdaters} from 'kepler.gl/reducers';
2
​
3
// Root Reducer
4
const reducers = combineReducers({
5
 keplerGl: keplerGlReducer,
6
 app: appReducer
7
});
8
​
9
const composedReducer = (state, action) => {
10
 switch (action.type) {
11
   case 'CLICK_BUTTON':
12
     return {
13
       ...state,
14
       keplerGl: {
15
         ...state.keplerGl,
16
         foo: {
17
            ...state.keplerGl.foo,
18
            mapState: mapStateUpdaters.togglePerspectiveUpdater(
19
            t  state.keplerGl.foo.mapState
20
            )
21
         }
22
       }
23
     };
24
 }
25
 return reducers(state, action);
26
};
27
​
28
export default composedReducer;
Copied!
Reducer Plugin
Custom reducer initial state
Last modified 1yr ago
Copy link