Initialization Actions are Handled Multiple Times by Original Reducer When Using Lazy/Suspense

[pahund]

In the Next Gen MOTOR-TALK app, an action INIT_REFRESHABLE_AD_PLACEMENT is dispatched when the RefreshableAd component has been mounted.

The original reducer of the app handles this action to set a timestamp that allows us to refresh the ad slot when the pagination is used (see Jira ticket PLY-711).

When we use withBrick or withBricks from modular-toolkit/bricks to dynamically install bricks to the application, the original reducer is replaced with a new one that includes the reducers of the bricks.

Next Gen MOTOR-TALK uses this to lazy-load the three sidebar elements “Board Info”, “Board Facilitators” and “FAQ”.

The enhanced reducer handles the INIT_REFRESHABLE_AD_PLACEMENT action four times, presumably once for the original reducer and once for each of the three installed bricks.

This causes the ad creatives for the sidebar rectangle, left skyscraper and right skyscraper to be requested from the DFP ad server four times each.

Subsequent actions, e.g. REFRESH_AD_PLACEMENT are handled by the reducer correctly, i.e. only once.

[pahund]

I've updated the unit tests and created an integration test, they all fail to reproduce the issue. I found out that the problem occurs only when Bricks are lazy-loaded using React.lazy and Suspense.

If I load the sidebar elements in Next Gen MOTOR-TALK without lazy/suspense, the INIT_REFRESHABLE_AD_PLACEMENT is handled only once by the reducer, as it should.

[pahund]

👷🏻‍♀️ TODO – write another integration test that uses lazy/suspense that reproduces the issue