Work with front-end handlers in Spire

1 min

Optimizely created a new set of handlers in Typescript (versus C# in Classic CMS) to use to extend the front-end with Spire. You can customize handler chains by adding/removing/replacing the handlers within them.

Spire uses handler chains for most actions a user takes on the storefront. Handlers manage things like loading data and adding items to the cart. Internally, handlers may call APIs and dispatch Redux actions.

This example shows a number of different ways to customize the LoadOrders handler.

import { chain, RequestDataFromApi } from "@insite/client-framework/Store/Data/Orders/Handlers/LoadOrders";
import { addToChainAfter, addToChainBefore, addToEndOfChain, addToStartOfChain, replaceInChain } from "@insite/client-framework/HandlerCreator";
addToStartOfChain(chain, props => { // The function can be `async` and use `await` in its body.
   // an anonymous function will show up without a name in the redux tools for handlers
});
addToEndOfChain(chain, namedFunction);
// get the type of props using this
type loadOrdersHandlerProps = Parameters<typeof RequestDataFromApi>[0];
function namedFunction(props: loadOrdersHandlerProps) {
    // a named function will show with the name in redux tools for handlers
    // this requires knowing the type of props to write
}
addToChainBefore(chain, RequestDataFromApi, props => { });
// trying to reference a handler not in the chain will result in a warning and the chain will not be modified
replaceInChain(chain, props => {}, props => {  });
addToChainAfter(chain, RequestDataFromApi,  props => { });
// replacing RequestDataFromApi with an empty function would lead to the site not working.
// take care when replacing handlers
// replaceInChain(chain, RequestDataFromApi, props => { });
// the chain is just an array, so it can be modified directly instead of using the helper functions
chain.push(props => {
    // Added to end of chain.
});