Using FPI Client Instance

The 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.

The FDK Store is a core part of the FDK that acts as the orchestrator between the storefront theme, extensions, and the GraphQL server. In this way, the FDK Store serves as a middleware layer that coordinates data manipulation, preserves execution order, and ensures consistent communication between all parts of the storefront runtime. When a GraphQL operation is triggered by the storefront, for example, adding an item to the cart, the FDK Store captures this operation and checks whether any registered extensions have hooked into it using functions like fpi.mutations.apply().

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, useFPI } from 'fdk-core/utils';

function Home() {
  /**
   * Get PAGE data from store
   */
  const fpi = useFPI();
  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.