Share data between Frontastic components

It's a common requirement that multiple components on a page access the same, shared data and all of these components get updated immediately when data changes. A typical example is on a product listing page, where there are:

• Tiles showing the products
• Widgets for managing filter options
• Pagination element at the top and at the bottom

These all access the same data set and are under direct influence if it changes.

The standard way to achieve this with Frontastic are outlined below:

Share data source data

If you're working with a data source, such as a product list, your Frontastic components only needs a Frontastic component schema field of type stream with the same streamType (in this example product-list).

On the page in Frontastic studio, a user can then select the same data source for each of the components. Frontastic won't load data source data for each of the components, but instead, load it just once. Whenever the configuration of the data source is changed, for example by applying a filter or paging, the change will take effect for all connected Frontastic components at the same time.

Share other data

If the data you need to share between components doesn't come from a data source, Frontastic won't take care of the sharing itself. But you can use our Redux stack in order to achieve the data sharing itself. To access the Redux store you need to implement and register a custom Loader. You can then access the data from the Redux store in your Frontastic component using the standard connect functionality from react-redux.