Search…
Forward Dispatch Actions
One of the biggest challenge of using local state is to dispatch actions that only modify a specific instance of the state. For instance, if we have 2 kepler.gl components in our app, one with id
foo other with id bar. Our keplerGl reducer is going to be keplerGl: {foo: …, bar …}. When foo dispatches an action, it only needs to update the state of foo, hence we need a way to decorate the action that the root reducer only pass it down to instance reducer foo. To solve this, we provide a set of forward functions called wrapTo, forwardTo and unwrap. wrapTo wraps an action payload into an forward action by adding an address _addr_ and a _forward_ signature to its meta. The root reducer will check if the given action has that address and if so, unwrap the action and pass it to the correct instance reducer.Here are the different options to dispatch forwarded actions to kepler.gl reducer.
1. Use forwardTo to add a dispatch function to your component
forwardTo to add a dispatch function to your componentYou can add a dispatch function to your component that dispatches actions to a specific kepler.gl instance using connect.
1
// component
2
import KeplerGl from 'kepler.gl';
3
import {connect} from 'react-redux';
4
​
5
// import action and forward dispatcher
6
import {toggleFullScreen, forwardTo} from 'kepler.gl/actions';
7
​
8
​
9
const MapContainer = props => (
10
<div>
11
<button onClick={() => props.keplerGlDispatch(toggleFullScreen())}/>
12
<KeplerGl
13
id="foo"
14
/>
15
</div>
16
)
17
​
18
const mapStateToProps = state => state
19
const mapDispatchToProps = (dispatch, props) => ({
20
dispatch,
21
keplerGlDispatch: forwardTo(‘foo’, dispatch)
22
});
23
​
24
export default connect(
25
mapStateToProps,
26
mapDispatchToProps
27
)(MapContainer);
Copied!
- ​
- 1.Use
wrapToto wrap action creator
You can also simply wrap an action into a forward action with the
wrapTo helper1
// component
2
import KeplerGl from 'kepler.gl';
3
​
4
// action and wrapper
5
import {toggleFullScreen, wrapTo} from 'kepler.gl/actions';
6
​
7
// create a function to wrapper action payload to 'foo'
8
const wrapToMap = wrapTo('foo');
9
const MapContainer = ({dispatch}) => (
10
<div>
11
<button onClick={() => dispatch(wrapToMap(toggleFullScreen())} />
12
<KeplerGl id="foo"/>
13
</div>
14
);
Copied!
Last modified 2yr ago
Copy link