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:
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
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.
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
Updated over 1 year ago