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!
Last modified 2yr ago
Copy link