npm i -save redux-middleware-workers
yarn add redux-middleware-workers
// 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.
yarn test
npm test