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. Pages receive state and customState as props:

const Home = ({ state, customState }) => {
  const { currentStore, currentUser } = state
  ...
}

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 a function component, take it from the props:

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

In a class component, take it from this.props:

const { state } = this.props

Write function components for new code. The theme's own components were migrated to function components, and hooks cannot be used in class components.

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)

In a function component you can also read the state through the useUStoreState hook, without wrapping the component:

import { useUStoreState } from '$ustoreinternal/services/hooks'

const Price = () => {
  const { currentCurrency, currentCulture } = useUStoreState()

  return (
    <span>{currentCurrency.Code} - {currentCulture.Code}</span>
  )
}

export default Price

The hook and the HOC return the same state object. Use the HOC when the component also needs customState as a separate prop, and the hook otherwise.

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