Working with front-end handlers in Spire

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.

Handler extension example

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