Create a Selector

Use a selector to access state models.

Selectors return specified data from the data store. If the data has not been updated, it will not be selected.

In actuality, you are exporting a wrapper around the component. The code arranges for the properties in this part of the Redux store to be passed into the component as props, and will redisplay the components if any of the properties change.

In this example, the selector named getCurrencyInfo is added within your widget’s index.js file. However, you can define selectors in other modules and reference them in your widget. For this example, this widget looks for the currency information in the state and looks in a sub-property of the state called myRepository. Within that repository there is a sub-property called currencyInfo. This is the convention for referring to parts of the state, which allows you to create individual functions that return the values of specific parts of the state. If you have not defined a function, it returns an empty object.

The following example uses props that are a combination of resource strings and props that are in the currencyInfo object. The currencies property populates the drop-down list.

Before you can create a selector, you must create a /selectors sub-directory in the /src/plugins directory. This is an example of the selector added to the /src/plugin/selectors/index.js file:

/**
 * Selector to extract myRepository from a state object.
 */
export const getMyRepository = state => state.myRepository || {};
 
/**
 * Selector to extract myRepository.currencyInfo from a state object.
 */
export const getCurrencyInfo = state => getMyRepository(state).currencyInfo || {};
 
/**
 * Selector to extract myRepository.currencyInfo.currencies from a state object.
 */
export const getCurrencies = state => getCurrencyInfo(state).currencies || {};