STEP-6 Extension plugins

In this step, we going finally write our first Extension plugins, at first we will assign our reducer to the global redux store, and then will plugin into the Router container mapDispatchToProps.

STEP-6

  1. First, let’s add our reducer. In your <SOURCE>/plugin create the file StoreReducer.plugin.js

scandipwa-socialshare/src/plugin/StoreReducer.plugin.js
import { SocialShareReducer } from '../store/SocialShare/SocialShare.reducer';

const getStaticReducers = (args, callback, instance) => ({
   ...callback(...args),
   SocialShareReducer
});

export const config = {
   'Store/Index/getStaticReducers': {
       function: getStaticReducers
   }
};

export default config;

3. What we want to succeed is to load all related to social share configurations on the initial page load. The same way that ConfigReducer does. In Router Container we can find initializeApplication method which is calling initial prop method init(); here is our source theme mapDispatchToProps and initializeApplication

src/component/Router/Router.container.js line 62 - 83
/** @namespace Component/Router/Container/mapDispatchToProps */
export const mapDispatchToProps = (dispatch) => ({
   updateMeta: (meta) => dispatch(updateMeta(meta)),
   updateConfigDevice: (device) => dispatch(updateConfigDevice(device)),
   init: () => {
       ConfigDispatcher.then(
           ({ default: dispatcher }) => dispatcher.handleData(dispatch)
       );
       MyAccountDispatcher.then(
           ({ default: dispatcher }) => dispatcher.handleCustomerDataOnInit(dispatch)
       );
       WishlistDispatcher.then(
           ({ default: dispatcher }) => dispatcher.updateInitialWishlistData(dispatch)
       );
       CartDispatcher.then(
           ({ default: dispatcher }) => dispatcher.updateInitialCartData(dispatch)
       );
       ProductCompareDispatcher.then(
           ({ default: dispatcher }) => dispatcher.updateInitialProductCompareData(dispatch)
       );
   }
});

Of course, we could plugin into mapDispatchToProps add new prop, then plugin into initializeApplication call original method and then ours, but it would be too boring, that why we going to plugin just in mapDispatchToProps and then going to mutate init prop method, let’s begin, In you <SOURCE>/plugin create the file RouterContainerMDTP.plugin.js

scandipwa-socialshare/src/plugin/RouterContainerMDTP.plugin.js
export const SocialShareDispatcher = import(
   /* webpackMode: "lazy", webpackChunkName: "dispatchers" */
   '../store/SocialShare/SocialShare.dispatcher'
);

/** @namespace ScandipwaSocialshare/Plugin/RouterContainerPlugin/mapDispatchToProps */
export const mapDispatchToProps = (args, callback, instance) => {
   const [dispatch] = args;
   const mdtp = callback(...args);
   const { init } = mdtp;

   mdtp.init = (...args) => {
       init(...args);
       SocialShareDispatcher.then(
           ({ default: dispatcher }) => dispatcher.handleData(dispatch)
       );
   };

   return mdtp;
};

export const config = {
   'Component/Router/Container/mapDispatchToProps': {
       function: mapDispatchToProps
   }
};

export default config;

Congrats, the most important part is done, we establish data transfer between our backend and frontend and, created a new reducer.

Last updated