Hooks and Utils

In addition to common components, Theme Rendering engine also injects some common useful hooks and helper functions to the theme build. These functions/ hooks can be imported from a global package viz. fdk-core/utils

useGlobalStore

This is a react hook that lets theme developers subscribe to a slice of the redux store. It is a direct extension of react-redux’s useSelector hook. The useGlobalStore hook is designed to be directly compatible with the getters provided in fpi.getters .

Example:

import React from 'react';
import { useGlobalStore } from 'fdk-core/utils';

function Home({ fpi }) {

  /**
   * Get PAGE data from store
   */
  const page = useGlobalStore(fpi.getters.PAGE) || {};

  /**
   * Rendering Logic Here
   */

  return (
    <p>Home Component</p>
  );
  
}

getPageSlug

This function takes the router object and returns the page slug of the current route which is used to fetch page specific data from the APIs.

Example:

import { getPageSlug } from 'fdk-core/utils';

export async function pageDataResolver({ fpi, router, themeId }) {
    const state = fpi.store.getState();
    const pageValue = getPageSlug(router);
    const APIs = [];

    const currentPageInStore = state?.theme?.page?.value ?? null;

    if (pageValue !== currentPageInStore) {
        APIs.push(
            fpi.theme.fetchPage({
                pageValue,
                themeId,
            }),
        )
    }
    return Promise.all(APIs).catch(console.log);
}