Worker Redux — RunRedux reducers and middleware in a Web Worker.

Installation

$ npm i workeredux$ npm i -D worker-loader

$ yarn add workeredux$ yarn add -D worker-loader

Action Flow via Redux with Web Workers

           +----------+    +----------+    +----------+ACTION1 -> | Reducers | -> |  Store   | -> | Effects  | -> ACTION2    ↑      +----------+    +----------+ |  +----------+    |                                   |  +----------+    |             ACTION w/ Worker Flag +->|  Worker  | -> ACTION3    |                                      +----------+ |    |                                                   |    +---------------------------------------------------+ ACTION w/ Return Flag

Code Examples

counter.worker.ts

import{applyMiddleware}from'redux';import{createLogger}from'redux-logger';importcreateSagaMiddlewarefrom'redux-saga';import{put,select,takeEvery}from'redux-saga/effects';import{createWorkerStore,returnActionCreator}from'workeredux';constdefaultState={counter:0};constreducer=(state=defaultState,action:any)=>{switch(action.type){case'counter/increment':return{counter:state.counter+action.payload||0,};}returnstate;};constcounterAction=returnActionCreator('reduxWorker/counter');function*saga(){yieldtakeEvery('counter/increment',function*(){const{ counter}=yieldselect();yieldput(counterAction(counter));});}constsagaMiddleware=createSagaMiddleware();createWorkerStore(reducer,applyMiddleware(createLogger({collapsed:false,}),sagaMiddleware,),);sagaMiddleware.run(saga);

initStore.ts

import{createReduxWorkerMiddleware}from'workeredux';importsagasfrom'./sagas';importreducersfrom'./reducers';// Use Webpack's worker-loader to import the Worker.importReduxWorkerfrom'worker-loader!./counter.worker';// Create the middleware for the Worker.const{ reduxWorkerMiddleware}=createReduxWorkerMiddleware(newReduxWorker());constsagaMiddleware=createSagaMiddleware();constcomposeMiddlewares=applyMiddleware(reduxWorkerMiddleware,sagaMiddleware,createLogger({collapsed:true,}),);exportfunctioninitStore(){store=createStore(reducers,composeMiddlewares);sagaMiddleware.run(sagas);returnstore;}

Library Interface

Client

/** * Error Action type. */constREDUX_WORKER_ERROR="@@redux-worker/error-action";`

/** * Type guard checks if the Action has a Worker Action flag. */constisWorkerAction:<Textendsstring>(action:AnyAction)=>action isAction<T>;

/** * Type guard checks for Worker Error Action. */constisErrorAction:(action:AnyAction)=>action isAction<'@@redux-worker/error-action'>;

/** * Mark any Action as a WorkerAction. */constmarkWorkerAction:<Textendsstring>(action:Action<T>)=>Action<T>;

/** * Worker Actions are sent to the web worker. */constworkerActionCreator:<Textendsstring>(type:T,)=><P,M=undefined>(payload:P,meta?:M)=>AnyAction;

/** * Function to create Redux Worker middleware. */functioncreateReduxWorkerMiddleware(worker:Worker,postAll?:boolean,):{reduxWorkerMiddleware:(api:MiddlewareAPI<Dispatch<AnyAction>,any>,)=>(next:(value:Action<any>)=>void)=>(action:Action<any>)=>void;terminate:()=>void;};

Worker

/** * Type guard checks if the action has a ReturnAction flag. */exportdeclareconstisReturnAction:<Textendsstring>(action:any)=>action isAction<T>;

/** * Mark any Action as a ReturnAction. */exportdeclareconstmarkReturnAction:<Textendsstring>(action:Action<T>)=>Action<T>;

/** * Return Actions are sent to the client. */exportdeclareconstreturnActionCreator:<Textendsstring>(type:T,)=><P,M=undefined>(payload:P,meta?:M)=>AnyAction;

/** * The createWorkerStore function is identical to the Redux createStore functon. * Except that it automatically includes the middleware to post ReturnActions to the main thread. */constcreateWorkerStore:StoreCreator;

Webpack

The MIT License (MIT)