├── .gitignore
├── README.md
├── demo
├── .npmignore
├── Calculate.tsx
├── Clock.tsx
├── WithWorker.tsx
├── WithoutWorker.tsx
├── index.html
├── index.tsx
├── lib
│ └── primes.ts
├── package.json
├── redux
│ ├── actions.ts
│ ├── reducer.ts
│ ├── store.ts
│ └── worker.ts
├── tsconfig.json
└── yarn.lock
├── img
├── react-redux-worker.svg
└── worker-demo.gif
├── package.json
├── src
├── ProxyStore.ts
├── StateContext.tsx
├── StoreContext.tsx
├── createProxyStore.ts
├── expose.ts
├── getProvider.tsx
├── hooks.ts
├── index.ts
└── uniqueId.ts
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .DS_Store
3 | node_modules
4 | .cache
5 | .rts2_cache_cjs
6 | .rts2_cache_esm
7 | .rts2_cache_umd
8 | dist
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-redux-worker
2 |
3 | Run a Redux store in a web worker.
4 |
5 | ## Why?
6 |
7 | If you're doing any sort of computationally expensive work in your [Redux](https://redux.js.org) reducers or middleware, it
8 | can prevent your UI from responding while it's thinking—making your application feel slow and
9 | unresponsive.
10 |
11 | In theory, web workers should be the perfect solution: You can do your heavy lifting in a worker
12 | thread without interfering with your main UI thread. But the message-based [web worker
13 | API](https://redux.js.org) puts us on unfamiliar terrain.
14 |
15 | This library is intended to make the developer experience of using a worker-based Redux store as
16 | similar as possible to an ordinary Redux setup.
17 |
18 | ## How it works
19 |
20 | This library provides you with a **proxy Redux store**. To your application, the proxy looks just
21 | like the real thing: You communicate with it synchronously using `useDispatch` and `useSelector`
22 | hooks just like the ones that the official [react-redux](https://github.com/reduxjs/react-redux)
23 | bindings provide.
24 |
25 | 
26 |
27 | The proxy then handles messaging back and forth with the store in the worker using the
28 | [Comlink](https://github.com/GoogleChromeLabs/comlink) library, built by the Google Chrome team.
29 |
30 | ## Running the demo
31 |
32 | ```bash
33 | yarn
34 | yarn start
35 | ```
36 |
37 | Then open http://localhost:1234 in a browser. You should see something like this:
38 |
39 | 
40 |
41 | ## Usage
42 |
43 | ### Add the dependency
44 |
45 | ```bash
46 | yarn add react-redux-worker
47 | ```
48 |
49 | ### Put your store in a worker, and create a proxy
50 |
51 | In a stand-alone file called `worker.ts` or `store.worker.ts`, import your reducer (and middlewares,
52 | if applicable) and build your store the way you always have. Then wrap it in a proxy store,
53 | and expose that as a worker messaging endpoint:
54 |
55 | ```ts
56 | // worker.ts
57 | import { createStore } from 'redux'
58 | import { reducer } from './reducer'
59 | import { expose, createProxyStore } from 'react-redux-worker'
60 |
61 | const store = createStore(reducer) // if you have initial state and/or middleware you can add them here as well
62 | const proxyStore = createProxyStore(store)
63 | expose(proxyStore, self)
64 | ```
65 |
66 | ### Add a context provider for the proxy store
67 |
68 | At the root of your app, replace your standard react-redux `Provider` with one that gives access to
69 | the proxy store.
70 |
71 | ```tsx
72 | import { getProvider } from 'react-redux-worker'
73 |
74 | const worker = new Worker('./redux/worker.ts')
75 | const ProxyProvider = getProvider(worker)
76 |
77 | ReactDOM.render(
78 |
79 | ,
81 | document.querySelector('.root')
82 | )
83 | ```
84 |
85 | ### Use the proxy `useDispatch` and `useSelector` hooks in your components
86 |
87 | ```tsx
88 | import * as React from 'react'
89 | import { useDispatch, useSelector } from 'react-redux-worker'
90 | import { actions } from './redux/actions'
91 |
92 | export function WithWorker() {
93 | const state = useSelector((s => s)
94 | const dispatch = useDispatch()
95 |
96 | dispatch(actions.setBusy(true))
97 | dispatch(actions.doSomeHeavyLifting())
98 | dispatch(actions.setBusy(false))
99 |
100 | return (
101 | {state.busy ? (
102 | Thinking...
103 | ) : (
104 | Result: {state.result}
105 | )}
106 |
)
107 | }
108 | ```
109 |
110 | ## Prior art
111 |
112 | - Based on [redux-workerized](https://github.com/mizchi/redux-workerized) by
113 | [@mizchi](https://github.com/mizchi/)
114 | - Uses some ideas from [A Guide to using Web Workers in
115 | React](https://www.fullstackreact.com/articles/introduction-to-web-workers-with-react) by [@yomieluwande](https://twitter.com/yomieluwande)
116 |
--------------------------------------------------------------------------------
/demo/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .cache
3 | dist
--------------------------------------------------------------------------------
/demo/Calculate.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { actions } from './redux/actions'
3 | import { State } from './redux/reducer'
4 | import { Dispatch } from 'redux'
5 |
6 | // When doing calculations in UI thread, React won't update at all if we don't do this
7 | export const nextFrame = () => new Promise(ok => requestAnimationFrame(ok))
8 |
9 | export const Calculate = ({
10 | state,
11 | dispatch,
12 | }: {
13 | state: State
14 | dispatch: Dispatch
15 | }) => {
16 | const calculate = async () => {
17 | dispatch(actions.setBusy(true))
18 | await nextFrame()
19 | for (let i = 0; i < 10; i++) {
20 | dispatch(actions.nextPrime())
21 | await nextFrame()
22 | }
23 | dispatch(actions.setBusy(false))
24 | }
25 | const style = {
26 | button: {
27 | border: '2px solid',
28 | margin: '10px 0',
29 | padding: '10px 30px',
30 | borderRadius: '10px',
31 | cursor: 'pointer',
32 | outline: 'none',
33 | minWidth: '10em',
34 | ...(state.busy
35 | ? {
36 | background: '#008080bb',
37 | borderColor: '#008080',
38 | color: 'white',
39 | }
40 | : {
41 | background: '#00808022',
42 | borderColor: '#008080',
43 | color: '#008080',
44 | }),
45 | },
46 | }
47 | return (
48 |
49 |
50 | {state.busy ? 'Calculating...' : 'Calculate'}
51 |
52 | {state.primes.map(p => (
53 |
{p}
54 | ))}
55 |
12 |
With worker
13 |
12 |
Without worker
13 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/demo/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as ReactDOM from 'react-dom'
3 | import { Provider } from 'react-redux'
4 | import { store } from './redux/store'
5 |
6 | import { getProvider } from '../src' // replace with 'react-redux-worker'
7 |
8 | import { Clock } from './Clock'
9 | import { WithoutWorker } from './WithoutWorker'
10 | import { WithWorker } from './WithWorker'
11 |
12 | // Set up proxy provider
13 | const worker = new Worker('./redux/worker.ts')
14 | const ProxyProvider = getProvider(worker)
15 |
16 | // Set up regular provider
17 | const RegularProvider = ({ children }) => (
18 | {children}
19 | )
20 |
21 | ReactDOM.render(
22 |
23 |
24 |
Use the buttons to find a few large prime numbers.
25 |
26 | Without a worker, notice how the animation stops updating every time the
27 | app calculates a new prime.
28 |
29 |
30 | {/* using redux-workerized */}
31 |
32 |
34 |
35 | {/* using regular redux */}
36 |
37 |
39 |
40 |
= {
4 | getState(): Promise
5 | dispatch(action: A): Promise
6 | subscribe(
7 | listener: (state: State) => void,
8 | selector?: (root: State) => Promise | State
9 | ): Promise
10 | unsubscribe(listenerId: number): Promise
11 | }
12 |
--------------------------------------------------------------------------------
/src/StateContext.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | export const StateContext = React.createContext(null as any)
3 |
--------------------------------------------------------------------------------
/src/StoreContext.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | export const StoreContext = React.createContext(null as any)
3 |
--------------------------------------------------------------------------------
/src/createProxyStore.ts:
--------------------------------------------------------------------------------
1 | import isEqual from 'lodash.isequal'
2 | import { AnyAction, Store } from 'redux'
3 | import { ProxyStore } from './ProxyStore'
4 | import { uniqueId } from './uniqueId'
5 |
6 | /**
7 | * Since our store is running in a worker process, we provide our application with a proxy
8 | * store that looks to it just like a garden-variety Redux store, except that everything is
9 | * asynchronous, since all communication with the worker is based on handling message events.
10 | *
11 | * Once created, the proxy needs to be exposed using the `expose` function:
12 | * ```js
13 | * import {expose, createProxyStore} from '...'
14 | * const store = createStore(reducer)
15 | * const proxyStore = createProxyStore(store)
16 | * expose(proxyStore, self)
17 | *```
18 | * @param store A regular Redux store created using `Redux.createStore`.
19 | */
20 | export const createProxyStore = (
21 | store: Store
22 | ): ProxyStore => {
23 | const listenerMap = new Map()
24 | return {
25 | async subscribe(onChangeHandler: Function): Promise {
26 | const subscriptionId = uniqueId()
27 | let lastSnapshot = store.getState()
28 | const unsubscribe = store.subscribe(async () => {
29 | const newSnapshot = store.getState()
30 | if (!isEqual(lastSnapshot, newSnapshot)) {
31 | onChangeHandler(newSnapshot)
32 | lastSnapshot = newSnapshot
33 | }
34 | })
35 | listenerMap.set(subscriptionId, unsubscribe)
36 | return subscriptionId
37 | },
38 | async unsubscribe(subscriptionId: number) {
39 | const listener = listenerMap.get(subscriptionId)
40 | if (listener) listener()
41 | listenerMap.delete(subscriptionId)
42 | },
43 | async getState() {
44 | return store.getState()
45 | },
46 | async dispatch(action: AnyAction) {
47 | store.dispatch(action)
48 | },
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/expose.ts:
--------------------------------------------------------------------------------
1 | import { ProxyStore } from './ProxyStore'
2 | import * as Comlink from 'comlinkjs'
3 |
4 | /**
5 | * Uses `Comlink` to expose a `proxyStore` as a worker.
6 | *
7 | * Example:
8 | * ```js
9 | * import {expose, createProxyStore} from '...'
10 | * const store = createStore(reducer)
11 | * const proxyStore = createProxyStore(store)
12 | * expose(proxyStore, self)
13 | *```
14 | * @param proxyStore A proxy store created using `createProxyStore`
15 | * @param context Typically `self` on a worker module
16 | */
17 | export const expose = (
18 | proxyStore: ProxyStore,
19 | context: Comlink.Endpoint | Window
20 | ): void => {
21 | Comlink.expose({ ...proxyStore }, context)
22 | }
23 |
--------------------------------------------------------------------------------
/src/getProvider.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { useStore } from './hooks'
3 | import { StateContext } from './StateContext'
4 | import { StoreContext } from './StoreContext'
5 |
6 | interface ProviderProps {
7 | children: React.ReactNode
8 | fallback?: JSX.Element
9 | }
10 |
11 | const empty = <>
12 |
13 | export function getProvider(worker: Worker) {
14 | return function Provider({ children, fallback = empty }: ProviderProps) {
15 | const [state, store] = useStore(worker)
16 |
17 | const provider = (
18 |
19 | {children}
20 |
21 | )
22 |
23 | return state ? provider : fallback
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/hooks.ts:
--------------------------------------------------------------------------------
1 | import * as Comlink from 'comlinkjs'
2 | import { useContext, useEffect, useState } from 'react'
3 | import { AnyAction, Dispatch } from 'redux'
4 | import { ProxyStore } from './ProxyStore'
5 | import { StoreContext } from './StoreContext'
6 | import { StateContext } from './StateContext'
7 | type Selector = (state: T) => any
8 |
9 | export function useStore(worker: Worker): [T | null, ProxyStore] {
10 | const [state, setState] = useState(null)
11 | const proxyStore: ProxyStore = Comlink.proxy(worker) as any
12 |
13 | // get current state then subscribe to it
14 | useEffect(() => {
15 | proxyStore.getState().then(async (s: T) => setState(s))
16 | proxyStore.subscribe(Comlink.proxyValue((s: T) => setState(s)))
17 | }, []) // only on first render
18 |
19 | return [state, proxyStore]
20 | }
21 |
22 | export const useSelector = (selector: Selector): any => {
23 | const state = useContext(StateContext)
24 | return selector(state)
25 | }
26 |
27 | export const useDispatch = (): Dispatch =>
28 | useContext(StoreContext).dispatch
29 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { useDispatch, useStore, useSelector } from './hooks'
2 | export { getProvider } from './getProvider'
3 | export { createProxyStore } from './createProxyStore'
4 | export { expose } from './expose'
5 |
--------------------------------------------------------------------------------
/src/uniqueId.ts:
--------------------------------------------------------------------------------
1 | let lastId = 0
2 | export const uniqueId = () => ++lastId
3 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "alwaysStrict": true,
4 | "baseUrl": "./",
5 | "declaration": true,
6 | "esModuleInterop": true,
7 | "importHelpers": true,
8 | "jsx": "react",
9 | "lib": ["dom", "esnext"],
10 | "module": "esnext",
11 | "moduleResolution": "node",
12 | "noFallthroughCasesInSwitch": true,
13 | "noImplicitAny": true,
14 | "noImplicitReturns": true,
15 | "noImplicitThis": true,
16 | "noUnusedLocals": true,
17 | "noUnusedParameters": true,
18 | "paths": {
19 | "*": ["src/*", "node_modules/*"]
20 | },
21 | "rootDir": "./",
22 | "sourceMap": true,
23 | "strict": true,
24 | "strictFunctionTypes": true,
25 | "strictNullChecks": true,
26 | "strictPropertyInitialization": true,
27 | "target": "es5"
28 | },
29 | "include": ["src", "types"]
30 | }
31 |
--------------------------------------------------------------------------------