> For the complete documentation index, see [llms.txt](https://docs.scandipwa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-6-extension-plugins.md).

# STEP-6 Extension plugins

[**STEP-6**](https://github.com/GAkim/SocialShareGraphQl/tree/STEP-6)

{% embed url="<https://www.youtube.com/watch?v=81u4HmDGamw>" %}

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

{% code title="scandipwa-socialshare/src/plugin/StoreReducer.plugin.js" %}

```javascript
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;
```

{% endcode %}

&#x20;   2\. Open [**Redux DevTools**](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) you should see **SocialShareReducer** object initial state.\
&#x20;look into **SocialShare.reducer.js lines 4 - 8**\
![](https://lh6.googleusercontent.com/TudkPuC8TXM3qUg30LbJLOJW2kdfF0abMc8nRUjW0tglRVjcXu9oS2AeRT7CIJgQjGwgi-KU5h8yQlkRFPQ4GGxPILtt2_RSTpgloUmNohdtGTjSWFPUGFKPsFDxuRoSwyOqhi76)

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&#x20;*****and initializeApplication***&#x20;

{% tabs %}
{% tab title=" mapDispatchToProps" %}
{% code title="src/component/Router/Router.container.js line 62 - 83" %}

```javascript
/** @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)
       );
   }
});
```

{% endcode %}
{% endtab %}

{% tab title="initializeApplication " %}
{% code title="src/component/Router/Router.container.js lines 197 - 200" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

Of course, we could plugin into **mapDispatchToProps** add new prop, then plugin into **initializeApplication** call original method and then our&#x73;**,** 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**

{% code title="scandipwa-socialshare/src/plugin/RouterContainerMDTP.plugin.js" %}

```javascript
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;

```

{% endcode %}

4\. Now restart your frontend and open [**Redux DevTools**](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) you should find **SocialShareReducer** object with value coming from the backend from our resolver check\
**ScandiPWA/SocialShareGraphQl/Model/Resolver/SocialShare.php line 27 -32**\
![](https://lh6.googleusercontent.com/ij0jLgsYB8SYuOxtZ0Cg4zRT3dvO-ZJJMXet5GWQIaU9Dy-Ysd3BpjEZpFuB5gwIuA9EDUQmfOU-uelO3rwcpNWdTM6XVnI6DUtaa8VAxoo7D8uxQfvgORFulUSFNYZaHi-Vmhb4)

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