Skip to main content

useAppDispatch

Description​

A React hook that provides access to methods for updating the global application state. Returns dispatch functions to set data directly or fetch new page data from the server.

Import​

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

Usage​

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

function NavigationLink({ href, children }) {
  const { fetchPageData } = useAppDispatch();
  
  const handleClick = async (e) => {
    e.preventDefault();
    const url = new URL(href, window.location.origin);
    url.searchParams.append('ajax', 'true');
    await fetchPageData(url.toString());
    window.history.pushState({}, '', href);
  };
  
  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  );
}

Methods​

setData​

Directly sets the application state. This is a React state setter function that allows you to update the global state without making a server request.

setData: React.Dispatch<React.SetStateAction<AppStateContextValue>>
import { useAppDispatch } from '@components/common/context/app';

function CartCounter({ count }) {
  const { setData } = useAppDispatch();

  const updateCartCount = () => {
    setData((prevState) => ({
      ...prevState,
      cartCount: count
    }));
  };

  return <button onClick={updateCartCount}>Update Cart</button>;
}

fetchPageData​

Fetches page data from the server and updates the application context. The URL should include ajax=true parameter to get JSON response instead of full HTML.

fetchPageData(url: string | URL): Promise<void>

Example: Client-Side Navigation​

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

function ProductLink({ productUrl }) {
  const { fetchPageData } = useAppDispatch();
  
  const navigateToProduct = async (e) => {
    e.preventDefault();
    
    try {
      // Fetch page data with ajax parameter
      const url = new URL(productUrl, window.location.origin);
      url.searchParams.append('ajax', 'true');
      
      await fetchPageData(url.toString());
      
      // Update browser history
      window.history.pushState({}, '', productUrl);
    } catch (error) {
      console.error('Failed to load product:', error);
    }
  };
  
  return (
    <a href={productUrl} onClick={navigateToProduct}>
      View Product
    </a>
  );
}

Example: Refreshing Current Page​

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

function RefreshButton() {
  const { fetchPageData } = useAppDispatch();
  
  const refreshPage = async () => {
    const currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set('ajax', 'true');
    
    await fetchPageData(currentUrl.toString());
  };
  
  return (
    <button onClick={refreshPage}>
      Refresh Page Data
    </button>
  );
}
  • AppProvider - The provider component that wraps the application
  • useAppState - Hook to access the application state