|
1 | 1 | # redux-middleware-workers |
2 | 2 |
|
3 | | - |
| 3 | +[](https://circleci.com/gh/Natasha08/redux-middleware-workers) |
4 | 4 | [](https://opensource.org/licenses/MIT) |
5 | | -[](https://badge.fury.io/js/npm) |
| 5 | + |
6 | 6 |
|
7 | 7 | ## Recommended Technologies |
8 | 8 | [webpack](https://github.com/webpack/webpack) |
9 | 9 | [worker-loader](https://github.com/webpack-contrib/worker-loader) |
10 | 10 |
|
| 11 | +### Install package |
11 | 12 | `npm i -save redux-middleware-workers` |
12 | 13 | `yarn add redux-middleware-workers` |
13 | 14 |
|
| 15 | +### Example |
| 16 | + |
| 17 | +``` |
| 18 | +// middleware.js |
| 19 | +
|
| 20 | +// worker loader is a webpack package that loads the worker for you. |
| 21 | +
|
| 22 | +import firstWorker from 'worker-loader?inline!./first_worker.js'; |
| 23 | +import secondWorker from 'worker-loader?inline!./second_worker.js'; |
| 24 | +import newWorkerMiddleware from 'redux-middleware-workers'; |
| 25 | +
|
| 26 | +const injectObjects = (action, getState) => { |
| 27 | + const objects = _.get(getState(), 'objects', []); |
| 28 | + return { ...action, objects }; |
| 29 | +}; |
| 30 | +
|
| 31 | +const injectStore = (action, getState) => { |
| 32 | + const store = getState(); |
| 33 | + return { ...action, store }; |
| 34 | +}; |
| 35 | +
|
| 36 | +const firstWorkerMiddleware = newWorkerMiddleware(new firstWorker(), 'FIRST_WORKER', injectObjects); |
| 37 | +const secondWorkerMiddleware = newWorkerMiddleware(new appStorage(), 'SECOND_WORKER', injectStore); |
| 38 | +
|
| 39 | +export default [firstWorkerMiddleware, secondWorkerMiddleware]; |
| 40 | +``` |
| 41 | + |
| 42 | +``` |
| 43 | +// store.js |
| 44 | +
|
| 45 | +import { createStore, applyMiddleware } from 'redux'; |
| 46 | +import workerMiddleware from './workers/middleware'; |
| 47 | +import rootReducer from './reducers/index'; |
| 48 | +
|
| 49 | +const store = createStore( |
| 50 | + rootReducer, |
| 51 | + undefined, |
| 52 | + applyMiddleware(...workerMiddleware) |
| 53 | +); |
| 54 | +
|
| 55 | +export default store; |
| 56 | +``` |
| 57 | + |
| 58 | +[Here](https://github.com/Natasha08/redux-middleware-workers-example) is a working example using multiple webworkers. |
| 59 | + |
14 | 60 | ## Testing |
15 | 61 | `yarn test` |
16 | 62 | `npm test` |
|
0 commit comments