Injecting custom components and reducers

📘

This is an article for advanced users of Frontastic.

You can use our dependency injection mechanism to replace components and inject reducers in the frontend. You'd most likely want to do this when you have custom Redux reducers or you consistently replace core components.

Replace core components

You can find the entry point for all replacements and injections here: <customer>_<project>/src/js/injection.js. The file will never be overwritten by Frontastic and it also includes a basic guide on how to inject custom components.

By using the ComponentInjector in an export statement, every React component can be replaced. We do this for every important core component, especially if they're used from other core components so that there's an easy way for you to replace its usage.

A good example of this is notifications (or alerts) which can be rendered by the Notifications component. Or basic patterns (atoms or molecules) from a theme that you want to replace.

Example

To replace the AtomsNotification, you could add something like the below to the injection.js in your project:

import AtomsNotification from './patterns/atoms/notifications/notification'

ComponentInjector.set('AtomsNotification', AtomsNotification)

You'll then be using your own AtomsNotification rather than the default ones.

Then to make a React component replaceable, you'll need to use something like the below in the export of the given React component:

export default ComponentInjector.return('My.Component', MyComponent)

Once you've done that, somebody else would be able to replace this React component in their project using the name My.Component.

List of exported components

• AppContainer – container wrapping the entire React App
• ScrollbarContainer – inner container holding custom scrollbars
• App.IntlProvider – ReactIntl provider
• LoadingState – global page loading indicator
• AtomsNotification
• SEO components:
  • Node.Meta.Title
  • Node.Meta.Keywords
  • Node.Meta.Description
• Base components (if used by your Frontastic components):
  • Markdown
  • Slider
  • Zoom
  • Fade
  • Grow

Register custom reducer

You can listen in on your Frontastic components by registering custom reducers that update a custom Redux state. During development, you can see all actions flowing through the stack in the debug console. In theory, you can react to all actions, but we only guarantee backwards compatibility for a few actions (found at the end of this article) at the moment.

A custom reducer can be used to inform third-party services about user navigation, or it could also be used to calculate information from cart changes.

You'll need to register the custom reducers at the beginning of the <customer>_<project>/src/js/injection.js file. To do this, you can import the file with the reducer, for example:

import GoogleAnalytics from './reducer/googleAnalytics'

An example of what the reducer itself could look like is below:

import ComponentInjector from 'frontastic-catwalk/src/js/app/injector';

const Analytics = function() {

}

const initialGlobalState = {
    // Optional custom global state
}

Analytics.handleAction = (globalState = initialGlobalState, action) => {
    switch (action.type) {
        case 'Frontend.Tracking.PageView':
            // @TODO: Do something here...
            return globalState
        break;
        default:
            // Do nothing for other actions
  }

  return globalState;
};

ComponentInjector.registerReducer('MyAnalytics', Analytics.handleAction);
export default Analytics;

The remaining logic and optional custom state are up to your concrete use case. The name MyAnalytics will also be the key in the Redux store where you can find the data created by your reducers.

List of important Redux events

• Frontend.Tracking.PageView – Emitted on page changes and the initial load of a page
• Frontastic.ApiCoreBundle.Api.context – Emitted for user context updates, for example on login and logout