Create a Selector

You use selectors to access state models and return specific data from the Redux data store. It selects a data, only if it's updated.

The selector when used with the connect component, passes the properties in the Redux store into the UI component as props and redisplays the UI component if any of the properties change. You can find the default selectors in the @oracle-dx4c-buying/common/selector/index.js file.

In the Plans widget example, the getPromotionOffering selector is used in multiple widgets, hence it's defined in the index.js file in the common directory. If a selector is more specific to an individual widget, you can write the selector in the widget code, or create a dedicated selectors.js file within the widget file structure.

In the Plans widget example, assume that the promotionOfferings object contains the plans data and it's automatically populated in the following part of the Redux state:

dx4cRepository: {
  planContext: {
    planSearch: {
      loading: false,
      promotionOfferings: [...]
    }
  }
}

You can write the getPromotionOffering selector to extract the promotionOfferings object in the Redux state into your UI component. Here's the sample getPromotionOffering selector file:

/**
* Selector to extract promotionOffering from a state
*/
export const getPromotionOffering = state => {
  const planContext = getDX4CRepository(state).planContext || {};
  const {planSearch} = planContext;
  if (planSearch && planSearch.planConfiguration) {
    const promotionOfferings = planSearch.promotionOfferings || [];
 
    return {
      promotionOffering: promotionOfferings
    };
  }
 
  return {promotionOffering: []};
};