Lazy Loading Webpack Modules
Objective-Redux makes it simple to dynamically load webpack modules, connect their controllers, and fire actions.
For example, suppose that you want to render a modal when the user clicks on a button, but you don't want to include the modal and its associated controllers on page load. Objective-Redux can listen to the action the button fires, load the webpack module that handles the action, then handle the action normally.
As a pre-requisite, you'll need to code split the controller(s) that will be bundled and targeted separately.
To setup, we define a pre-dispatch hook and pass it to the ObjectiveStore. This function takes an action as a parameter and can return either a promise (if the action should wait until the promise resolves to be fired) or null (if the action should be fired immediately).
import React from 'react';
import ReactDOM from 'react-dom';
import { ObjectiveStoreProvider, ObjectiveStore } from 'objective-redux';
import App from './app';
// We create a pre-dispatch hook, which is function that returns a promise.
// The promise should resolve when the app is ready for the action to be fired.
const preDispatchHook = (action) => {
let result = Promise.resolve();
switch (action.type) {
case myAction:
result = import(/* webpackChunkName: "lazyLoadingPack" */ './lazy-loaded-module');
break;
// other actions here
}
return result;
}
export const objectiveStore = new ObjectiveStore({
preDispatchHook,
});
ReactDOM.render(
<ObjectiveStoreProvider objectiveStore={objectiveStore}>
<App />
</ObjectiveStoreProvider>,
document.getElementById('root')
);
Now, we can simply fire the action targeting our ObjectiveRedux controller normally.
import React from 'react';
import {
useObjectiveStore,
createAction,
getActionNameForController,
} from 'objective-redux';
const myAction = createAction(
getActionNameForController('MyController', 'MyAction');
);
function ButtonComponent() {
const objectiveStore = useObjectiveStore();
const fireAction = () => {
objectiveStore.dispatch(myAction());
}
return (
<button onClick={fireAction}>
Click to target an action in another bundle
</button>
);
}
Now, when the button is clicked:
- The webpack bundle is loaded
- The Objective-Redux controllers in the bundle are registered
- The controller handling the action is instantiated (its reducers are connected/sagas are run)
- The action is fired
See the working example in the public GitHub repository.