redux-middleware-workers v1.0.1

Recommended Technologies

webpack
worker-loader

Install package

npm i -save redux-middleware-workers
yarn add redux-middleware-workers

Example

// middleware.js

// worker loader is a webpack package that loads the worker for you.

import firstWorker from 'worker-loader?inline!./first_worker.js';
import secondWorker from 'worker-loader?inline!./second_worker.js';
import newWorkerMiddleware from 'redux-middleware-workers';

const injectTodos = (action, getState) => {
  const todos = _.get(getState(), 'todos', []);
  return { ...action, todos };
};

const injectStore = (action, getState) => {
  const store = getState();
  return { ...action, store };
};

// When you initiate a new worker middleware, the first argument is a new worker.
// The second argument is the worker type (this is a string).
// And the third is an optional function that should return an object to pass to the worker.

const firstWorkerMiddleware = newWorkerMiddleware(new firstWorker(), 'FIRST_WORKER', injectTodos);
const secondWorkerMiddleware = newWorkerMiddleware(new secondWorker(), 'SECOND_WORKER', injectStore);

export default [firstWorkerMiddleware, secondWorkerMiddleware];

// store.js

import { createStore, applyMiddleware } from 'redux';
import workerMiddleware from './workers/middleware';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  undefined,
  applyMiddleware(...workerMiddleware)
);

export default store;

// action.js

export function activateWorker() {
  // the meta.type below should match the string passed as a second argument to newWorkerMiddleware in `middleware.js`

  const meta = { webworker: true, type: 'FIRST_WORKER' };

  return {
    type: 'SECOND_WORKER_LOADING',
    meta
  }
}

Here is a working example using multiple webworkers.

Testing

yarn test
npm test

Want to contribute?

Review our process docs