redux-bundler-worker

/* --- main.js (Main Thread) --- */ import { render, h } from 'preact'; import { Provider } from 'redux-bundler-preact'; import { getStoreProxy } from 'redux-bundler-worker'; // A dummy RootComponent for demonstration const RootComponent = ({ children }) => h('div', null, h('h1', null, 'App Running in Worker'), children); // Create the Web Worker instance, pointing to your bundled worker script // Ensure '/build/worker.js' is correctly served by your web server/bundler const worker = new Worker('/build/worker.js', { type: 'module' }); // Get a store proxy that mimics the redux-bundler store API // All actions dispatched and selectors called on this proxy will be marshalled to the worker const storeProxy = getStoreProxy(worker); // Render your Preact app, passing the store proxy to the Provider render( h(Provider, { store: storeProxy }, h(RootComponent)), document.getElementById('app-root') ); console.log('Main thread initialized with worker-proxied Redux store.'); /* --- worker.js (Web Worker Thread) --- */ import { composeBundles } from 'redux-bundler'; import { setUpWorker } from 'redux-bundler-worker'; // Define a simple Redux Bundler bundle inside the worker const appBundle = { name: 'app', reducer: (state = { count: 0 }, action) => { if (action.type === 'INCREMENT') { return { ...state, count: state.count + 1 }; } return state; }, doIncrement: () => ({ dispatch }) => { dispatch({ type: 'INCREMENT' }); }, selectCount: (state) => state.app.count, }; // Compose the bundles to create the main Redux Bundler store function const getWorkerStore = (initialData = {}) => composeBundles(appBundle)(initialData); // Set up the worker, passing the function that returns the composed store setUpWorker(getWorkerStore); console.log('Web Worker initialized with Redux Bundler store.'); // Example of interacting from the main thread after setup (e.g., in browser console) // window.store = storeProxy; // expose for debugging // storeProxy.doIncrement(); // storeProxy.selectCount();