|
| 1 | +<p align="center"> |
| 2 | + <img src="https://i.imgur.com/o0u6dto.png" width="300" height="300" alt="stockroom"> |
| 3 | + <br> |
| 4 | + <a href="https://www.npmjs.org/package/stockroom"><img src="https://img.shields.io/npm/v/stockroom.svg?style=flat" alt="npm"></a> <a href="https://travis-ci.org/developit/stockroom"><img src="https://travis-ci.org/developit/stockroom.svg?branch=master" alt="travis"></a> |
| 5 | +</p> |
| 6 | + |
| 7 | +# Stockroom |
| 8 | + |
| 9 | +> Offload your store management to a worker. |
| 10 | +
|
| 11 | +Stockroom seamlessly runs a [Unistore] store (and its actions) in a Web Worker, setting up optimized bidirectional sync so you can also use & subscribe to it on the main thread. |
| 12 | + |
| 13 | +- **Easy** same API as [unistore] - a simple add-on |
| 14 | +- **Opt-in** centralized actions with the option of running on the main thread |
| 15 | +- **Convenient** action selector shorthand - no action creator needed for simple actions |
| 16 | +- **Gracefully degrades** - feature-detect Worker support and fall back to `stockroom/inline` |
| 17 | + |
| 18 | + |
| 19 | +## Table of Contents |
| 20 | + |
| 21 | +- [Install](#install) |
| 22 | +- [Usage](#usage) |
| 23 | +- [API](#api) |
| 24 | +- [License](#license) |
| 25 | + |
| 26 | + |
| 27 | +## Install |
| 28 | + |
| 29 | +Stockroom requires that you install [unistore](https://github.com/developit/unistore) (300b) as a peer dependency. |
| 30 | + |
| 31 | +```sh |
| 32 | +npm install --save unistore stockroom |
| 33 | +``` |
| 34 | + |
| 35 | + |
| 36 | +## Usage |
| 37 | + |
| 38 | +We'll have two files: `index.js` and `worker.js`. The first is what we import from our app, so it runs on the main thread - it imports our worker (using [worker-loader] or [workerize-loader]) and passes it to Stockroom to create a store instance around it. |
| 39 | + |
| 40 | +**index.js**: |
| 41 | + |
| 42 | +```js |
| 43 | +import createStore from 'stockroom' |
| 44 | +import StoreWorker from 'worker-loader!./worker' |
| 45 | + |
| 46 | +let store = createStore(new StoreWorker()) |
| 47 | + |
| 48 | +let increment = store.action('increment') |
| 49 | +store.subscribe(console.log) |
| 50 | + |
| 51 | +// Let's run a registered "increment" action in the worker. |
| 52 | +// This will eventually log a state update to the console - `{ count: 1 }` |
| 53 | +increment() |
| 54 | +``` |
| 55 | + |
| 56 | + |
| 57 | +The second file is our worker code, which runs in the background thread. Here we import Stockroom's worker-side "other half", `stockroom/worker`. This function returns a store instance just like `createStore()` does in [Unistore], but sets things up to synchronize with the main/parent thread. It also adds a `registerActions` method to the store, which you can use to define globally-available actions for that store. These actions can be triggered from the main thread by invoking `store.action('theActionName')` and calling the funtion it returns. |
| 58 | + |
| 59 | +**worker.js**: |
| 60 | + |
| 61 | +```js |
| 62 | +import createStore from 'stockroom/worker' |
| 63 | + |
| 64 | +let store = createStore({ |
| 65 | + count: 0 |
| 66 | +}) |
| 67 | + |
| 68 | +store.registerActions( store => ({ |
| 69 | + increment: ({ count }) => ({ count: count+1 }) |
| 70 | +}) ) |
| 71 | + |
| 72 | +export default store // if you wish to use `stockroom/inline` |
| 73 | +``` |
| 74 | + |
| 75 | + |
| 76 | +### API |
| 77 | + |
| 78 | +<!-- Generated by documentation.js. Update this documentation by updating the source code. --> |
| 79 | + |
| 80 | +#### module:stockroom |
| 81 | + |
| 82 | +The main stockroom module, which runs on the main thread. |
| 83 | + |
| 84 | +##### createStore |
| 85 | + |
| 86 | +Given a Web Worker instance, sets up RPC-based synchronization with a WorkerStore running within it. |
| 87 | + |
| 88 | +**Parameters** |
| 89 | + |
| 90 | +- `worker` **[Worker](https://developer.mozilla.org/docs/Web/JavaScript)** An instantiated Web Worker (eg: `new Worker('./store.worker.js')`) |
| 91 | + |
| 92 | +**Examples** |
| 93 | + |
| 94 | +```javascript |
| 95 | +import createStore from 'stockroom' |
| 96 | +import StoreWorker from 'worker-loader!./store.worker' |
| 97 | +let store = createStore(new StoreWorker) |
| 98 | +``` |
| 99 | + |
| 100 | +Returns **Store** synchronizedStore - a mock unistore store instance sitting in front of the worker store. |
| 101 | + |
| 102 | +#### module:stockroom/inline |
| 103 | + |
| 104 | +Used to run your whole store on the main thread. |
| 105 | +Useful non-worker environments or as a fallback. |
| 106 | + |
| 107 | +##### createInlineStore |
| 108 | + |
| 109 | +For SSR/prerendering, pass your exported worker store through this enhancer |
| 110 | + to make an inline synchronous version that runs in the same thread. |
| 111 | + |
| 112 | +**Parameters** |
| 113 | + |
| 114 | +- `workerStore` **WorkerStore** The exported `store` instance that would have been invoked in a Worker |
| 115 | + |
| 116 | +**Examples** |
| 117 | + |
| 118 | +```javascript |
| 119 | +let store |
| 120 | +if (SUPPORTS_WEB_WORKERS) { |
| 121 | + let createStore = require('stockroom/inline') |
| 122 | + store = createStore(require('./store.worker')) |
| 123 | +} |
| 124 | +else { |
| 125 | + let createStore = require('stockroom') |
| 126 | + let StoreWorker = require('worker-loader!./store.worker') |
| 127 | + store = createStore(new StoreWorker()) |
| 128 | +} |
| 129 | +export default store |
| 130 | +``` |
| 131 | + |
| 132 | +Returns **Store** inlineStore - a unistore instance with centralized actions |
| 133 | + |
| 134 | +#### module:stockroom/worker |
| 135 | + |
| 136 | +The other half of stockroom, which runs inside a Web Worker. |
| 137 | + |
| 138 | +##### createWorkerStore |
| 139 | + |
| 140 | +Creates a unistore instance for use in a Web Worker that synchronizes itself to the main thread. |
| 141 | + |
| 142 | +**Parameters** |
| 143 | + |
| 144 | +- `initialState` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Initial state to populate (optional, default `{}`) |
| 145 | + |
| 146 | +**Examples** |
| 147 | + |
| 148 | +```javascript |
| 149 | +import createWorkerStore from 'stockroom/worker' |
| 150 | +let initialState = { count: 0 } |
| 151 | +let store = createWorkerStore(initialState) |
| 152 | +store.registerActions({ |
| 153 | + increment(state) { |
| 154 | + return { count: state.count + 1 } |
| 155 | + } |
| 156 | +}) |
| 157 | +``` |
| 158 | + |
| 159 | +Returns **WorkerStore** workerStore (enhanced unistore store) |
| 160 | + |
| 161 | + |
| 162 | +### License |
| 163 | + |
| 164 | +[MIT License](https://oss.ninja/mit/developit) © [Jason Miller](https://jasonformat.com/) |
| 165 | + |
| 166 | + |
| 167 | +[unistore]: https://github.com/developit/unistore |
| 168 | +[preact]: https://github.com/developit/preact |
| 169 | +[worker-loader]: https://github.com/webpack-contrib/worker-loader |
| 170 | +[workerize-loader]: https://github.com/developit/workerize-loader |
0 commit comments