Accessing uStore data - XMPieLab/uStore-NG GitHub Wiki

As described in the uStore library page, you can access uStore data in the application. This data is referred to as the state. Redux is used for implementing the state management.

Let’s look at an example of a state:

{
	currentStore:'...', //Current store model  
	currentUser:'...', //Current user logged to the store  
	customState:'...', //Custom state of the application. It is populated from the application data and can be modified.  
	cultures:'...', //All cultures defined in the current store  
	currentCulture:'...', //Culture by which the UI is defined  
	currencies:'...', //Currencies defined in the current store  
        currentCurrency:'...', //Currency model by which the UI is displayed  
}

You can access all data models in the state by installing and opening the Redux DevTools in your browser:

Pages and components are the application’s building blocks. A page contains multiple components, and it is the first HTML that is served from the server upon the initial load of the application. A component is a React component that defines UI and logic.

The method of data retrieval differs between a page and a component.

If you wish to access uStore data, first decide whether to access it from a page or from a component.

If you wish to access data from a page (located under the routes folder), you will be able to access it automatically, as follows:

const { state: {currentStore, currentUser}} = this.props

If you wish to access the data from a component, you have two options. You can pass props from the parent component, which may already have the data. However, if the required component is a child component located down the components tree, and you don’t want to pass the data through the entire tree, you can use the withState HOC.

In order to retrieve the state object inside the component:

• If the component is a class component :

const {state} = this.props

• If thw component is a functional component:

const Price = ({props, state}) => {}

All uStore data will be in the state object. For example:

const {currentStore, currentCurrency, currentCulture} = state

1. Import the service:

import {withState} from '$ustoreinternal/services/withState'

2. Wrap the component export definition (e.g. the Price component):

export default withState(Price)

Full example:

import {withState} from '$ustoreinternal/services/withState'

const Price = ({state}) => {
  const {currentCurrency, currentCulture} = state
  
  return (
    <span>{currentCurrency.Code} - {currentCulture.Code}</span>
  )
}

export default withState(Price)

For a detailed example, watch the Accessing uStore data video (under uStore NG Themes) on the XMPie Campus.