Entire Redux in Web Worker
Entire Redux in Web Worker
Inspired by React + Redux + Comlink = Off-main-thread.
This is still an experimental project. Please give us a feedback to make it stable.
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.
npm install redux-in-worker
store.worker.js: ```javascript 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: ```jsx 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 (
const App = () => ( );
ReactDOM.render(, document.getElementById('app')); ```
The examples folder contains working examples. You can run one of them with
PORT=8080 npm run examples:01_minimal
and open http://localhost:8080 in your web browser.