{"id":15632676,"url":"https://github.com/keyz/redux-worker-middleware","last_synced_at":"2025-06-18T03:32:36.021Z","repository":{"id":84513743,"uuid":"51180790","full_name":"keyz/redux-worker-middleware","owner":"keyz","description":":construction_worker: Unopinionated Web Workers for Redux","archived":false,"fork":false,"pushed_at":"2018-07-19T03:52:41.000Z","size":54,"stargazers_count":169,"open_issues_count":4,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-16T14:40:46.035Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/keyanzhang/redux-worker-middleware","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keyz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-05T23:29:48.000Z","updated_at":"2024-02-23T19:09:41.000Z","dependencies_parsed_at":"2023-03-07T21:15:32.349Z","dependency_job_id":null,"html_url":"https://github.com/keyz/redux-worker-middleware","commit_stats":null,"previous_names":["keyanzhang/redux-worker-middleware"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/keyz/redux-worker-middleware","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keyz%2Fredux-worker-middleware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keyz%2Fredux-worker-middleware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keyz%2Fredux-worker-middleware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keyz%2Fredux-worker-middleware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keyz","download_url":"https://codeload.github.com/keyz/redux-worker-middleware/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keyz%2Fredux-worker-middleware/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260481716,"owners_count":23015787,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T10:44:57.796Z","updated_at":"2025-06-18T03:32:31.003Z","avatar_url":"https://github.com/keyz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux Worker Middleware\n[![build status](https://img.shields.io/travis/keyanzhang/redux-worker-middleware/master.svg?style=flat-square)](https://travis-ci.org/keyanzhang/redux-worker-middleware)\n[![test coverage](https://img.shields.io/coveralls/keyanzhang/redux-worker-middleware/master.svg?style=flat-square)](https://coveralls.io/github/keyanzhang/redux-worker-middleware?branch=master)\n[![npm version](https://img.shields.io/npm/v/redux-worker-middleware.svg?style=flat-square)](https://www.npmjs.com/package/redux-worker-middleware)\n\nRedux + Web Workers = :boom: :construction_worker:\n\n```\nnpm install --save redux-worker-middleware\n```\n\n## Intro\n\nThe goal of the middleware is to provide an unopinionated workflow that delegates expensive operations to Web Workers. Thus, please notice that this middleware **doesn't** wrap, transform, or shim Web Workers.\n\nIn case you need, webpack's [worker-loader](https://github.com/webpack/worker-loader) is an out of box solution for that.\n\n## ~~API~~ How it works\n`redux-worker-middleware` exports a single (default) function `createWorkerMiddleware`. Here are the steps to set it up:\n\n1. Pass it a Web Worker instance and put the returned (curried) function in the middleware chain.\n    - Notice that your worker should have the signature of `Action -\u003e Action`; that is, it always takes a complete action and returns a complete action, which can be dispatched right away. It makes the API much simpler.\n    - Need to partially update the payload? Sure, just let your worker handle the logic! It has to work anyway.\n\n2. To let the workers work, make sure that your action is [FSA compliant](https://github.com/acdlite/flux-standard-action) and the `action.meta.WebWorker` field is truthy. Otherwise, the middleware will just pass the action along.\n\n3. If an action specifies that it needs to be processed by a worker, The middleware will obey the order. Then when the data comes back, it will be re-dispatched as a new action and be passed through all the middlewares (see [#5](https://github.com/keyanzhang/redux-worker-middleware/pull/5)).\n\n## Demo\nI wrote this middleware as part of https://github.com/keyanzhang/repo.cat, where I need to parse a lot of markdown stuff to HTML at runtime. So the real demo can be found there: the Web Worker related parts live in [`actions/DataFetching.js`](https://github.com/keyanzhang/repo.cat/blob/master/src/actions/DataFetching.js), [`middlewares/worker.js`](https://github.com/keyanzhang/repo.cat/blob/master/src/middlewares/worker.js), and [`workers/GFMParserWorker.js`](https://github.com/keyanzhang/repo.cat/blob/master/src/workers/GFMParserWorker.js).\n\nA minimal example can be found as below:\n\nWeb Worker: `Add1Worker.js`:\n```javascript\nself.onmessage = ({ data: action }) =\u003e { // `data` should be a FSA compliant action object.\n  self.postMessage({\n    type: action.type,\n    // Notice that we remove the `meta.WebWorker` field from the payload.\n    // Since the returned data will be dispatched as a new action and be passed through all the middlewares,\n    // keeping the `meta.WebWorker` field may cause an infinite loop.\n    payload: {\n      num: action.payload.num + 1,\n    },\n  });\n};\n```\n\nActionCreator:\n```javascript\nexport const add1Action = (n) =\u003e ({\n  type: 'ADD_1',\n  meta: {\n    WebWorker: true, // This line specifies that the worker should show up and do the job\n  },\n  payload: {\n    num: n,\n  },\n});\n```\n\nThen in your store configuration,\n```javascript\nimport { createStore, combineReducers, applyMiddleware } from 'redux';\nimport createWorkerMiddleware from 'redux-worker-middleware';\n\nimport * as reducers from '../reducers';\nimport {\n  logger,\n  thunk,\n} from '../middlewares';\n\nconst Add1Worker = require('worker!../workers/Add1Worker'); // webpack's worker-loader\nconst add1Worker = new Add1Worker;\n\nconst workerMiddleware = createWorkerMiddleware(add1Worker);\n\nconst rootReducer = combineReducers(reducers);\n\nconst createStoreWithMiddleware = applyMiddleware(\n  workerMiddleware,\n  thunk,\n  logger,\n)(createStore);\n\n// ... ...\n```\n\nThat's it! Now when you fire an `add1Action`, the worker will show up and do the computation. The result (action) will be re-dispatched as a new action and be passed through all the middlewares.\n\n## Notes\n\nFor now, we don't really care if you actually pass it a real Worker instance; as long as it look likes a Worker and works like a Worker (i.e., has a `postMessage` method), it _is_ a Worker. The reason behind is that we want to support Web Worker shims in an easy manner.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyz%2Fredux-worker-middleware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeyz%2Fredux-worker-middleware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyz%2Fredux-worker-middleware/lists"}