State and reducers are not removed when dynamic component unmounts

[madrussa]

When mounting a module using the DynamicModuleLoader and then later unmounting it, the state and reducers remain.

This can be verified by removing a DynamicModuleLoader and inspecting Redux using redux dev tools. The state applied when the module was loaded remains after the component is removed.

I have a solution but this took a while to work out what was going on, storing here for those who come across this same issue. The fix would be to document this feature.

Solution:
There is an undocumented strictMode property you can add to the loader. If you are using strict mode you must add this to all of your dynamic modules.

<DynamicModuleLoader key="myModule" modules={[getMyModule()]} strictMode>
    <MyComponent />
</DynamicModuleLoader>

redux-dynamic-modules/packages/redux-dynamic-modules-react/src/DynamicModuleLoader.tsx

Lines 15 to 21 in c1439e6

	/**
	* Set this flag to indicate that this component is being rendered in 'Strict Mode'
	* React 'StrictMode' does not allow constructor side-effects, so we defer adding modules to componentDidMount
	* when this flag is set.
	* This has the effect of adding a second render.
	*/
	strictMode?: boolean;

As shown above, what happens if you do not include the flag is the module manager will add the module twice, but only removes it once. This has the side effect of causing the reference counter to always think the module is still required.

[luox12]

thanks @madrussa for your resolution.

[Pabliomen]

Thanks @madrussa this really helped me! works like a charm