Skip to content
Entire Redux in Web Worker
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ initial commit Aug 17, 2019
dist
examples react-router example Aug 19, 2019
src
.eslintrc.json update dependencies and some configs Sep 12, 2019
.gitignore
.travis.yml
CHANGELOG.md
LICENSE initial commit Aug 17, 2019
README.md add blog item Sep 16, 2019
package-lock.json update dependencies and some configs Sep 12, 2019
package.json
tsconfig.json
webpack.config.js

README.md

redux-in-worker

Build Status npm version bundle size

Entire Redux in Web Worker

Introduction

Inspired by React + Redux + Comlink = Off-main-thread.

This is still an experimental project.

Some key points are:

  • It only sends "diffs" from the worker thread to the main thread.
  • All Objects in a state tree keep the ref equality.
  • It can run middleware in the worker thread. (only non-DOM middleware #2)
  • No async functions are involved.
  • No proxies are involved (at the moment).

Install

npm install redux-in-worker

Usage

store.worker.js:

import { createStore } from 'redux';
import { exposeStore } from 'redux-in-worker';

const initialState = { count: 0 };
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

exposeStore(store);

app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { wrapStore } from 'redux-in-worker';

const initialState = { count: 0 };
const worker = new Worker('./store.worker', { type: 'module' });
const store = wrapStore(worker, initialState);

const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector(state => state.count);
  return (
    <div>
      count: {count}
      <button type="button" onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button type="button" onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
};

const App = () => (
  <Provider store={store}>
    <Counter />
    <Counter />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('app'));

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:minimal

and open http://localhost:8080 in your web browser.

Blogs

You can’t perform that action at this time.