webpack/assets/javascripts/foreman_toast_notification.js:

const importToastNotificationsFromRails = () => {
  const toastNotificationsContainer = $('#toast-notifications-container');
 // rest of the function ommited
}

// load toast notifications from Rails on ContentLoad
// to accommodate rails flash syntax
$(document).on('ContentLoad', () => {
  clear();
  importToastNotificationsFromRails();
});

webpack/assets/javascript/react_app/routes/common/PageLayout/PageLayout.js, in shortened version:

const PageLayout = props => {
 return (
      <div id="react-content">
        <div
          id="toast-notifications-container" 
          data-notifications={toastNotifications}
        >
          <ToastsList />
        </div>
   // rest ommited
  )
}

The current flow is that page layout component binds notification data to page node with specified id and importToastNotificationsFromRails triggered on content load dispatches action to get toasts into the store. There is no reason we should rely on the page load event, not even for the erb pages. We can use toast_notification_data helper to pass toasts through component mounter as props and load them into store in react code.