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);
}