# worker-store

> Store Container inside webworker

Latest version **0.0.3** (published 2018-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install worker-store
pnpm add worker-store
yarn add worker-store
bun add worker-store
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-01-25 |
| First published | 2018-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | > 4 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Stoyan Delev |
| Maintainers | mutebg |

## Links

- npm: https://www.npmjs.com/package/worker-store
- Repository: https://github.com/mutebg/WorkerStore
- Homepage: https://github.com/mutebg/WorkerStore#readme
- Issues: https://github.com/mutebg/WorkerStoreissues
- npm.io page: https://npm.io/package/worker-store

## Recent versions

- 0.0.3 (latest) — 2018-01-25
- 0.0.2 — 2018-01-17
- 0.0.0-semantically-released — 2018-01-17

## README

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Worker-Store](#worker-store)
  - [Examples](#examples)
  - [Installation](#installation)
  - [Documentaion](#documentaion)
  - [Usage](#usage)
  - [Debug](#debug)
  - [Inspiration](#inspiration)
  - [LICENSE](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Worker-Store

1kb state container running inside WebWorker.
A similar idea to Redux, besides the action-reducers run inside WebWorker.
To do that, dispatch sends only the name of the actions and payload.

Offload expensive work to a WebWorker might improve significant performance.
While Main ( UI ) thread can be blocked from expensive operations, the WebWorker solves that like messaging results ( state ) of the operations to UI thread.

## Examples

[React example](./examples/react)

[Live demo](https://workerstore.surge.sh/)

## Installation

```sh
npm install --save worker-store
```

## Documentaion

[API documentation](./docs)

## Usage

You need worker loader, something like https://github.com/webpack-contrib/worker-loader

In your app.js

```js
import { createStore } from 'worker-store';
import { Provider, connect  } from 'worker-store/react';
import Worker from './store.worker.js';

// initial store state
const initState = {count: 0, news: []};

// create store
const store = createStore( initState , new Worker() );

// Select state from the store
const mapStateToProps = ( state, ownProps) => ({
    count: state.count,
    news: state.news,
});

//Connects React/Preact component to the store.
const App = connect(mapStateToProps)(({count, news, dispatch}) => {
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={ () => dispatch('inc')}>+1</button>
      <button onClick={ () => dispatch('dec')}>-1</button>
      <button onClick={ () => dispatch('fetch', 5)}>fetch news</button>
      <button onClick={ () => dispatch('generator')}>generator</button>
    </div>
  )
});

// Makes the store available to the connect() calls in the component hierarchy below.
export default () => (
  <Provider store={store}>
    <App />
  </Provider>,
)
```

Inside your web worker: store.worker.js

```js
import { runStore, put } from "worker-store/worker";

// runStore receive objet of actions
// every action receive current state as first parameter
// and rest as parameters from dispatch function
// action must return the next state  or part of it
runStore({
  inc: state => ({ count: state.count + 1 }),
  dec: state => ({ count: state.count - 1 }),

  // can return Promise which resolves into next state
  fetch: (state, payload) =>
    fetch("https://jsonplaceholder.typicode.com/posts/" + payload)
      .then(res => res.json())
      .then(json => ({ news: json })),

  // or generator function which yield next state
  generator: function*(state) {
    try {
      // using yield and put to update the state
      yield put({ status: "loading" });
      const response = yield fetch(
        "https://jsonplaceholder.typicode.com/posts/1"
      );
      const news = yield response.json();
      yield put({ news: news, status: "done" });
    } catch (err) {
      yield put({ status: "loaded", error: true });
    }
  }
});
```

## Debug

You can use [kuker](https://github.com/krasimir/kuker) to debug state and actions,
very similar way redux-dev-tools does

```js
store.subscribe(({ state, action }) => {
  window.postMessage(
    {
      kuker: true,
      type: "change state",
      origin: "none",
      label: action,
      time: new Date().getTime(),
      state: state
    },
    "*"
  );
});
```

## Inspiration

Inspired by
https://github.com/developit/unistore
https://github.com/developit/stockroom

## LICENSE

MIT

---
_Source: https://npm.io/package/worker-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._