Skip to main content

useAppState

Description​

A React hook that provides access to the global application state. Returns the current application context including GraphQL response data, configuration, props map, widgets, and fetching state.

Import​

import { useAppState } from '@components/common/context/app';

Usage​

import { useAppState } from '@components/common/context/app';

function ProductList() {
  const { graphqlResponse, config, fetching } = useAppState();
  
  const products = graphqlResponse.products || [];
  
  if (fetching) {
    return <div>Loading...</div>;
  }
  
  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Return Value​

Returns an AppStateContextValue object with the following properties:

PropertyTypeDescription
graphqlResponseRecord<string, any>The GraphQL response data for the current page.
configConfigApplication configuration including page meta, tax settings, and catalog settings.
propsMapRecord<string, any[]>Map of component props organized by component ID.
widgetsany[]Array of widget configurations (optional).
fetchingbooleanWhether page data is currently being fetched.

Config Type​

interface Config {
  pageMeta: PageMetaInfo;
  tax: {
    priceIncludingTax: boolean;
  };
  catalog: {
    imageDimensions: { width: number; height: number };
  };
}

Example: Using Configuration​

import { useAppState } from '@components/common/context/app';

function ProductPrice({ price }) {
  const { config } = useAppState();
  const priceIncludesTax = config.tax.priceIncludingTax;
  
  return (
    <div className="product-price">
      <span className="amount">${price}</span>
      <span className="tax-info">
        {priceIncludesTax ? '(incl. tax)' : '(excl. tax)'}
      </span>
    </div>
  );
}
  • AppProvider - The provider component that wraps the application
  • useAppDispatch - Hook to access methods for updating the state