Skip to main content

Using FPI Client Instance

Using FPI Client Instance​

For theme developers, fpi client is available on every page by useFPI hook. Theme developers can use this client to fetch and sync data with their redux stores

Read Redux State​

Get current State Snapshot​

The fpi client exposes the standard redux store at fpi.store. Developers can use redux method fpi.store.getState() to the current snapshot of the state.

Subscribe to a slice of state​

FDK Store uses Redux Toolkit to manage slices of state internally. Theme developers can leverage the useGlobalStore hook provided by the theme engine through a global package called fdk-core/utils. The useGlobalStore hook is similar to the standard useSelector hook provided by redux toolkit. Developers can use useGlobalStore and pass the required getters provided in fpi.getters to subscribe to state changes in a React Component.

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

Note : Using console.log(fpi.getters) you can get list of all getters.