React-redux-worker NPM

react-redux-worker

Run a Redux store in a web worker.

Why?

If you're doing any sort of computationally expensive work in your Redux reducers or middleware, it can prevent your UI from responding while it's thinking—making your application feel slow and unresponsive.

In theory, web workers should be the perfect solution: You can do your heavy lifting in a worker thread without interfering with your main UI thread. But the message-based web worker API puts us on unfamiliar terrain.

This library is intended to make the developer experience of using a worker-based Redux store as similar as possible to an ordinary Redux setup.

How it works

This library provides you with a proxy Redux store. To your application, the proxy looks just like the real thing: You communicate with it synchronously using useDispatch and useSelector hooks just like the ones that the official react-redux bindings provide.

diagram

The proxy then handles messaging back and forth with the store in the worker using the Comlink library, built by the Google Chrome team.

Running the demo

yarn
yarn start

Then open http://localhost:1234 in a browser. You should see something like this:

demo

Usage

Add the dependency

yarn add react-redux-worker

Put your store in a worker, and create a proxy

In a stand-alone file called worker.ts or store.worker.ts, import your reducer (and middlewares, if applicable) and build your store the way you always have. Then wrap it in a proxy store, and expose that as a worker messaging endpoint:

// worker.ts
import { createStore } from 'redux'
import { reducer } from './reducer'
import { expose, createProxyStore } from 'react-redux-worker'

const store = createStore(reducer) // if you have initial state and/or middleware you can add them here as well
const proxyStore = createProxyStore(store)
expose(proxyStore, self)

Add a context provider for the proxy store

At the root of your app, replace your standard react-redux Provider with one that gives access to the proxy store.

import { getProvider } from 'react-redux-worker'

const worker = new Worker('./redux/worker.ts')
const ProxyProvider = getProvider(worker)

ReactDOM.render(
  <ProxyProvider>
    <App />
  </ProxyProvider>,
  document.querySelector('.root')
)

Use the proxy `useDispatch` and `useSelector` hooks in your components

import * as React from 'react'
import { useDispatch, useSelector } from 'react-redux-worker'
import { actions } from './redux/actions'

export function WithWorker() {
  const state = useSelector((s => s)
  const dispatch = useDispatch()

  dispatch(actions.setBusy(true))
  dispatch(actions.doSomeHeavyLifting())
  dispatch(actions.setBusy(false))

  return (<div>
    {state.busy ? (
      <span>Thinking...</span>
    ) : (
      <span>Result: {state.result}</span>
    )}
  </div>)
}