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 AppScrollbarContainer
– inner container holding custom scrollbarsApp.IntlProvider
– ReactIntl providerLoadingState
– global page loading indicatorAtomsNotification
- 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 pageFrontastic.ApiCoreBundle.Api.context
– Emitted for user context updates, for example on login and logout
Updated over 2 years ago