<aside> ℹ️ Learn more about Redux stores, and plugins:

How to Work with Redux?

How to work with plugins?

</aside>

Plugins can be used to extend a reducer. For example, they can add new action types or modify the return values of specific actions.

How to add a new action to the reducer?

1. Import the action from a specific path.
2. Create a function that will extend the reducer’s default behavior
3. Plugin into the reducer namespace

// can be any action. out newly created or the one from ScandiPWA source code 
import { UPDATE_CONFIG } from 'SourceStore/Config/Config.action';

const **getSomeValueFromAction** = (args, callback) => {
		// callback(...args) - if default result from the function's callback,
		// in our case the return value from ConfigReducer
    const result = callback(...args);
		// state can be omitted if not necessary, like so: 
		// const [, action] = args;
    const [state, **action**] = args;

		// destructure **action** to get necessary values from it
		// for example if we want to get **someValue** from action's config value
		const {
        type,
        config: {
            **someValue**
        } = {}
    } = **action**;

		// add early return condition, where we will check if
		// **action**'s type is different from the one we are trying to modify
		if (type !== UPDATE_CONFIG) {
        return result;
    }
		
		// new return value for our action type: UPDATE_CONFIG
		// where we spread the result object and add new value - someValue
    return {
        ...result,
        **someValue**
    };
});

// copy the namespace from the reducer you're trying to plug in into
export const config = {
   'Store/Config/Reducer': {
        function: **getSomeValueFromAction**
    }
};

export default config;

You can add a new action type using the same steps, but instead of using a single if condition, you can utilize a switch statement, as in the following example:

// replace CustomAction with your action
import { CUSTOM_ACTION } from 'PATH_TO/CUSTOM_ACTION/CUSTOM_ACTION.action';
import { UPDATE_CONFIG } from 'SourceStore/Config/Config.action';

const getSomeValueFromAction = (args, callback) => {
	const result = callback(...args);
	const [state, action] = args;
	const { someValue: prevSomeValue = {} } = state;
	
	const {
	  type,
	  config: {
	      someValue
	  } = {},
		newProperty
	} = action;
	
	switch (type) {
  case UPDATE_CONFIG:
      return {
          ...result,
          someValue
      };

  case CUSTOM_ACTION:
      return {
          ...result,
          someValue: {
              ...prevSomeValue,
					    newProperty
					 // ^^^ short for
					 // newProperty: newProperty
          }
      };
  default:
      return result;
  }
}

export const config = {
	'Store/Config/Reducer': {
		function: getSomeValueFromAction
	}
};

export default config;