workerize-redux

workerize-redux is a simple middleware for redux applications which allows you to run specific tasks on web workers. workerize-redux accepts action creators of type

{
    type: 'ACTION_NAME',
    worker: true,
    successActionType: 'SUCCESS_ACTION_NAME'
}

Unlike normal action creators, workerize-redux checks if it has two additional attributes worker and successActionType. Once the task in worker thread is complete, a new action of type successActionType will be dispatched with the result as action payload.

Installing

Using npm:

$ npm install workerize-redux

Example

Worker thread

//worker.ts
import { createWorker } from 'workerize-redux';
import { calculateSomethingComplex } from './calculate';

// The passed state will be whole state of the app.
// Pass a reducer like function as argument to createWorker
// The difference here is the return value of the reducer will be sent as payload to the successAction
const worker = createWorker((state, action) => {
    switch (action.type) {
        case 'WORKER_ACTION':
            const result = calculateSomethingComplex();
            return result;
    }
});

Main thread

//store.ts
import { createStore, applyMiddleware } from 'redux';
import { applyWorker } from 'workerize-redux';

const worker = new Worker('./dist/worker.ts');
const workerMiddleware = applyWorker(worker);
const store = createStore(reducer, preloadedState, applyMiddleware(workerMiddleware));

//main.ts

dispatch({
    type: 'WORKER_ACTION',
    worker: true,
    successActionType: 'WORKER_SUCCESS_ACTION',
    payload: someObj
});

//reducer.ts
const reducer = (state, action) => {
    switch (action.type) {
        case 'WORKER_SUCCESS_ACTION':
            return {...state, result: action.payload};
    }
});

Instance methods

TypeScript

workerize-redux includes TypeScript definitions out of the box.