Asynchronous Redux-Saga-Process

async-process.js

import { Process } from 'redux-saga-process';

const build_config = config => ({
  pid: 'async',
  exports: ['actions', 'selectors'],
  log: false,
  ...config,
});

const loadProcessOnAction = 'AUTH_SESSION';

/*
  If we want to asynchronously import scope into our process, we add
  the loadProcess static property on the process and return a promise
  that will resolve to our scope.
 */
const loadProcessScope = (promises, defaulted) => {
  // https://www.npmjs.com/package/promise-map-es6
  promises.set(
    'firebase',
    import(/* webpackChunkName: "firebase-app" */ `firebase/app`),
  );
  // import but dont add to our this.scope
  promises.push(
    import(/* webpackChunkName: "firebase-auth" */ `firebase/auth`),
    import(/* webpackChunkName: "firebase-db" */ `firebase/database`),
    import(/* webpackChunkName: "firebase-msg" */ `firebase/messaging`),
  );
};

export default function configureAsyncProcess(_config, callback) {
  const config = build_config(_config);

  const processConfig = {
    pid: config.pid,
    reduces: config.reduces,
  };

  let Firebase;

  return class ExampleAsyncImportProcess extends Process {
    static config = processConfig;
    static loadOnAction = loadProcessOnAction;
    static loadProcess = loadProcessScope;

    constructor(processID, prev_state, proc) {
      super(processID, prev_state, proc);
      this.state = {
        someKey: undefined,
        // prev_state holds the this.state of the previous process that is being
        // replaced with this one (hot reloading).
        ...prev_state,
      };
    }

    *processStarts() {
      /* This will not startup until AUTH_SESSION has been received _AND_
         we have imported and loaded (via code-splitting) our firebase package.
      */
      Firebase = this.scope.firebase;
    }
  };
}