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:

1. The webpack bundle is loaded
2. The Objective Redux controllers in the bundle are registered
3. The controller handling the action is instantiated (its reducers are connected/sagas are run)
4. The action is fired

See the working example in the public GitHub repository.

For an example implementation using Objective Redux to lazy-load React components and Controllers, see the PreDispatchManage.js file in the working example.