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
1
import { SocialShareReducer } from '../store/SocialShare/SocialShare.reducer';
2
​
3
const getStaticReducers = (args, callback, instance) => ({
4
   ...callback(...args),
5
   SocialShareReducer
6
});
7
​
8
export const config = {
9
   'Store/Index/getStaticReducers': {
10
       function: getStaticReducers
11
   }
12
};
13
​
14
export default config;
Copied!
    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
initializeApplication 
src/component/Router/Router.container.js line 62 - 83
1
/** @namespace Component/Router/Container/mapDispatchToProps */
2
export const mapDispatchToProps = (dispatch) => ({
3
   updateMeta: (meta) => dispatch(updateMeta(meta)),
4
   updateConfigDevice: (device) => dispatch(updateConfigDevice(device)),
5
   init: () => {
6
       ConfigDispatcher.then(
7
           ({ default: dispatcher }) => dispatcher.handleData(dispatch)
8
       );
9
       MyAccountDispatcher.then(
10
           ({ default: dispatcher }) => dispatcher.handleCustomerDataOnInit(dispatch)
11
       );
12
       WishlistDispatcher.then(
13
           ({ default: dispatcher }) => dispatcher.updateInitialWishlistData(dispatch)
14
       );
15
       CartDispatcher.then(
16
           ({ default: dispatcher }) => dispatcher.updateInitialCartData(dispatch)
17
       );
18
       ProductCompareDispatcher.then(
19
           ({ default: dispatcher }) => dispatcher.updateInitialProductCompareData(dispatch)
20
       );
21
   }
22
});
Copied!
src/component/Router/Router.container.js lines 197 - 200
1
    initializeApplication() {
2
        const { init } = this.props;
3
        init();
4
    }
Copied!
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
1
export const SocialShareDispatcher = import(
2
   /* webpackMode: "lazy", webpackChunkName: "dispatchers" */
3
   '../store/SocialShare/SocialShare.dispatcher'
4
);
5
​
6
/** @namespace ScandipwaSocialshare/Plugin/RouterContainerPlugin/mapDispatchToProps */
7
export const mapDispatchToProps = (args, callback, instance) => {
8
   const [dispatch] = args;
9
   const mdtp = callback(...args);
10
   const { init } = mdtp;
11
​
12
   mdtp.init = (...args) => {
13
       init(...args);
14
       SocialShareDispatcher.then(
15
           ({ default: dispatcher }) => dispatcher.handleData(dispatch)
16
       );
17
   };
18
​
19
   return mdtp;
20
};
21
​
22
export const config = {
23
   'Component/Router/Container/mapDispatchToProps': {
24
       function: mapDispatchToProps
25
   }
26
};
27
​
28
export default config;
29
​
Copied!
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.

STEP-5 Creating Extension, Base Redux Store

STEP-7 GraphQL types, Helpers

Last modified 3mo ago

Copy link