Injecting custom components and reducers

You can use our dependency injection mechanism to replace components and inject reducers in the Catwalk 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 are 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.

For 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 from Catwalk.

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

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

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

List of exported components
  • AtomsNotification
  • AppContainer
  • Node.Meta.Description
  • Node.Meta.Title
  • Node.Meta.Keywords
  • Markdown
  • App.IntlProvider
  • LoadingState

Register custom reducer

You can listen in on your Tastics 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 just 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 is 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

‹ Back to article list

Next article ›

Custom endpoints and API access

Still need help? Contact us Contact us