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;

2. Open Redux DevTools you should see SocialShareReducer object initial state. look into SocialShare.reducer.js lines 4 - 8

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

mapDispatchToProps

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)
       );
   }
});

initializeApplication

src/component/Router/Router.container.js lines 197 - 200

    initializeApplication() {
        const { init } = this.props;
        init();
    }

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;

4. Now restart your frontend and open Redux DevTools you should find SocialShareReducer object with value coming from the backend from our resolver check ScandiPWA/SocialShareGraphQl/Model/Resolver/SocialShare.php line 27 -32

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