Need help with redux-in-worker?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dai-shi
210 Stars 4 Forks MIT License 64 Commits 6 Opened issues

Description

Entire Redux in Web Worker

Services available

!
?

Need anything else?

Contributors list

# 22,957
Redux
React
reactjs
TypeScr...
48 commits

redux-in-worker

CI npm size discord

Entire Redux in Web Worker

Introduction

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.

Install

npm install redux-in-worker

Usage

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(new URL('./store.worker', import.meta.url)); const store = wrapStore(worker, initialState);

const Counter = () => { const dispatch = useDispatch(); const count = useSelector(state => state.count); return (

count: {count} dispatch({ type: 'increment' })}>+1 dispatch({ type: 'decrement' })}>-1
); };

const App = () => ( );

ReactDOM.render(, document.getElementById('app')); ```

Examples

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.

Blogs

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.