{"id":21818582,"url":"https://github.com/mutebg/workerstore","last_synced_at":"2025-04-14T02:27:42.656Z","repository":{"id":57156864,"uuid":"117327599","full_name":"mutebg/WorkerStore","owner":"mutebg","description":"Small React state container running inside WebWorker","archived":false,"fork":false,"pushed_at":"2018-01-29T20:25:09.000Z","size":317,"stargazers_count":31,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-16T07:05:29.031Z","etag":null,"topics":["preact","react","reactjs","redux","webworker"],"latest_commit_sha":null,"homepage":"","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/mutebg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-13T08:32:47.000Z","updated_at":"2023-06-10T07:18:20.000Z","dependencies_parsed_at":"2022-08-30T03:21:39.018Z","dependency_job_id":null,"html_url":"https://github.com/mutebg/WorkerStore","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutebg%2FWorkerStore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutebg%2FWorkerStore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutebg%2FWorkerStore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mutebg%2FWorkerStore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mutebg","download_url":"https://codeload.github.com/mutebg/WorkerStore/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226779897,"owners_count":17680772,"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":["preact","react","reactjs","redux","webworker"],"created_at":"2024-11-27T16:13:29.143Z","updated_at":"2024-11-27T16:13:30.087Z","avatar_url":"https://github.com/mutebg.png","language":"JavaScript","readme":"\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [Worker-Store](#worker-store)\n  - [Examples](#examples)\n  - [Installation](#installation)\n  - [Documentaion](#documentaion)\n  - [Usage](#usage)\n  - [Debug](#debug)\n  - [Inspiration](#inspiration)\n  - [LICENSE](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n# Worker-Store\n\n1kb state container running inside WebWorker.\nA similar idea to Redux, besides the action-reducers run inside WebWorker.\nTo do that, dispatch sends only the name of the actions and payload.\n\nOffload expensive work to a WebWorker might improve significant performance.\nWhile Main ( UI ) thread can be blocked from expensive operations, the WebWorker solves that like messaging results ( state ) of the operations to UI thread.\n\n## Examples\n\n[React example](./examples/react)\n\n[Live demo](https://workerstore.surge.sh/)\n\n## Installation\n\n```sh\nnpm install --save worker-store\n```\n\n## Documentaion\n\n[API documentation](./docs)\n\n## Usage\n\nYou need worker loader, something like https://github.com/webpack-contrib/worker-loader\n\nIn your app.js\n\n```js\nimport { createStore } from 'worker-store';\nimport { Provider, connect  } from 'worker-store/react';\nimport Worker from './store.worker.js';\n\n// initial store state\nconst initState = {count: 0, news: []};\n\n// create store\nconst store = createStore( initState , new Worker() );\n\n// Select state from the store\nconst mapStateToProps = ( state, ownProps) =\u003e ({\n    count: state.count,\n    news: state.news,\n});\n\n//Connects React/Preact component to the store.\nconst App = connect(mapStateToProps)(({count, news, dispatch}) =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{count}\u003c/h1\u003e\n      \u003cbutton onClick={ () =\u003e dispatch('inc')}\u003e+1\u003c/button\u003e\n      \u003cbutton onClick={ () =\u003e dispatch('dec')}\u003e-1\u003c/button\u003e\n      \u003cbutton onClick={ () =\u003e dispatch('fetch', 5)}\u003efetch news\u003c/button\u003e\n      \u003cbutton onClick={ () =\u003e dispatch('generator')}\u003egenerator\u003c/button\u003e\n    \u003c/div\u003e\n  )\n});\n\n// Makes the store available to the connect() calls in the component hierarchy below.\nexport default () =\u003e (\n  \u003cProvider store={store}\u003e\n    \u003cApp /\u003e\n  \u003c/Provider\u003e,\n)\n```\n\nInside your web worker: store.worker.js\n\n```js\nimport { runStore, put } from \"worker-store/worker\";\n\n// runStore receive objet of actions\n// every action receive current state as first parameter\n// and rest as parameters from dispatch function\n// action must return the next state  or part of it\nrunStore({\n  inc: state =\u003e ({ count: state.count + 1 }),\n  dec: state =\u003e ({ count: state.count - 1 }),\n\n  // can return Promise which resolves into next state\n  fetch: (state, payload) =\u003e\n    fetch(\"https://jsonplaceholder.typicode.com/posts/\" + payload)\n      .then(res =\u003e res.json())\n      .then(json =\u003e ({ news: json })),\n\n  // or generator function which yield next state\n  generator: function*(state) {\n    try {\n      // using yield and put to update the state\n      yield put({ status: \"loading\" });\n      const response = yield fetch(\n        \"https://jsonplaceholder.typicode.com/posts/1\"\n      );\n      const news = yield response.json();\n      yield put({ news: news, status: \"done\" });\n    } catch (err) {\n      yield put({ status: \"loaded\", error: true });\n    }\n  }\n});\n```\n\n## Debug\n\nYou can use [kuker](https://github.com/krasimir/kuker) to debug state and actions,\nvery similar way redux-dev-tools does\n\n```js\nstore.subscribe(({ state, action }) =\u003e {\n  window.postMessage(\n    {\n      kuker: true,\n      type: \"change state\",\n      origin: \"none\",\n      label: action,\n      time: new Date().getTime(),\n      state: state\n    },\n    \"*\"\n  );\n});\n```\n\n## Inspiration\n\nInspired by\nhttps://github.com/developit/unistore\nhttps://github.com/developit/stockroom\n\n## LICENSE\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutebg%2Fworkerstore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmutebg%2Fworkerstore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutebg%2Fworkerstore/lists"}