Redux
Package | Version | Downloads |
---|---|---|
@carto/react-redux |
Functions to manage application state using React-Redux and the Redux Toolkit. This package includes 2 slices to manage the main redux blocks of a CARTO for React application. A slice is a way to manage a “portion” or slice of the redux store with a module:
cartoSlice
: to deal with basemap, viewState, sources, layers, and filters on sources.oauthSlice
: to use an OAuth app.
Tip: The CARTO for React template already makes extensive use of these slices for redux out of the box, to provide several features in an easy way.
CARTO Slice
createCartoSlice
A function that accepts an initialState
, setups the state, and creates the reducers that support CARTO for React architecture. In the CARTO 3 templates this slice includes also the OAuth settings; in the CARTO 2 templates there is a separate slice for OAuth settings.
Input:
Param | Type | Description |
---|---|---|
initialState |
| the initial state |
An initial state object might look like:
addSource
Action to add a source to the store.
Input:
Param | Type | Description |
---|---|---|
props |
| { id, data, type, credentials, connection } |
props.id |
| Unique id for the source |
props.data |
| Table name, tileset name or SQL query |
props.type |
| Source type. Check available types here |
props.credentials |
| Credentials for accessing the source |
props.connection |
| Connection name. Used only for CARTO 3. |
props.filtersLogicalOperator |
| Logical operation to use for combining filters. Can take the values |
[props.queryParameters] |
| Optional. SQL query parameters |
Example:
removeSource
Action to remove a source from the store
Input:
Param | Type | Description |
---|---|---|
sourceId |
| id of the source to remove |
Example:
addLayer
Action to add a Layer to the store. By default, the layer visible
attribute is set to true
unless the layerAttributes
property overrides the visible
property.
Important! This doesn’t imply adding a whole deck.gl layer to the redux store, just a “pointer” to it, by using an id
shared with a Layer file + linking it to a source
. See code generated by hygen assistants in the create-react-app template projects.
Input:
Param | Type | Description |
---|---|---|
props |
| { id, source, layerAttributes } |
props.id |
| unique id for the layer |
props.source |
| id of the source of the layer |
[props.layerAttributes] |
| (optional) custom attributes to pass to the layer |
Example:
updateLayer
Action to update a Layer in the store
Input:
Param | Type | Description |
---|---|---|
props |
| { id, layerAttributes } |
props.id |
| unique id for the CARTO layer already in the store |
props.layerAttributes |
| custom attributes to update in the layer |
Example:
removeLayer
Action to remove a layer from the store
Input:
Param | Type | Description |
---|---|---|
id |
| id of the layer to remove |
Example:
setCredentials
Action to set the default credentials parameters to use for requests to the CARTO platform.
Input:
Param | Type | Description |
---|---|---|
credentials |
| CARTO platform credentials. Check the parameters here |
Example:
setBasemap
Action to set a basemap. To see available maps, check the reference for @carto/react-basemaps
. If you use a Google Maps basemap, you would need to manage its api_key properly.
Input:
Param | Type | Description |
---|---|---|
basemap |
| the new basemap to add |
Example:
addFilter
Action to add a filter on a given source
by a column
. This is done internally (and in a transparent way) by widgets.
Input:
Param | Type | Description |
---|---|---|
props |
| { id, column, type, values, [owner], [params]} |
props.id |
| Identifier of the source to apply the filter on |
props.column |
| Column from the source to use by the filter |
props.type |
| Type of filter |
props.values |
| Values for the filter (eg: [‘a’, ‘b’] for ‘in’ or [10, 20] for ‘between’) |
[props.owner] |
| (optional) Identifier of the widget triggering the filter (to be excluded) |
[props.params] |
| (optional) Additional filter parameters (depending on filter type) |
Example:
This would apply a filter equivalent to a ‘WHERE country IN (‘Spain’)’ to the source. It is important to notice that a source can have multiple filters at the same type.
removeFilter
Action to remove a column filter from a source.
Input:
Param | Type | Description |
---|---|---|
props |
| { id, column } |
props.id |
| sourceId of the source to remove the filter from |
props.column |
| column of the filter to remove |
Example:
This would remove a filter (the previous example on addFilter)
clearFilters
Action to remove all filters from a source.
Input:
Type | Description |
---|---|
| sourceId of the source to remove all filters from |
Example:
This would remove all filters from a source with id ‘sourceOne’
selectSourceById
Redux selector to get a source by ID
Input:
Param | Type | Description |
---|---|---|
state |
| root redux state |
sourceId |
| id of the source to recover from redux |
Example:
setViewState
Action to set the current ViewState of the map.
Input:
Param | Type | Description |
---|---|---|
viewState |
| ViewState, as defined by deck.gl |
Example Example to increase the zoom level
setWidgetLoadingState
Action to set the loading state to a specific widget. It can be useful when creating custom widgets.
Input:
Param | Type | Description |
---|---|---|
props |
| { widgetId, isLoading} |
props.widgetId |
| id of the widget |
props.isLoading |
| loading state |
removeWidgetLoadingState
Action to remove a specific widget loading state
Input:
Param | Type | Description |
---|---|---|
widgetId |
| id of the widget |
setAllWidgetsLoadingStates
Action to set the all the widgets loading state at once
Input:
Param | Type | Description |
---|---|---|
areLoading |
| loading state |
OAuth Slice
createOauthCartoSlice
A function that accepts an initialState, setup the state, and creates reducers to manage OAuth with the CARTO 2 platform. This slice is not used with CARTO 3 templates because OAuth is managed through the Auth0 React SDK.
Input:
Param | Type | Description |
---|---|---|
initialState |
| the initial state |
An initial state object might look like:
setTokenAndUserInfoAsync
Action to set the userInfo in the redux store, once there is a valid token (and set them both in state).
Input:
Param | Type | Description |
---|---|---|
props |
| oauthParams, as returned by |
Example:
logout
Action to logout, removing user info & token from redux store.
Example:
selectOAuthCredentials
Selector to fetch the current OAuth credentials from the redux store.
Returns:
Param | Type | Description |
---|---|---|
credentials |
| { username, apiKey, serverUrlTemplate } |
credentials.username |
| CARTO username |
credentials.apiKey |
| apiKey coming from OAuth |
credentials.serverUrlTemplate |
| required for further api requests |
Example:
Last updated