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.