{"id":15799,"library":"redux-bundler-worker","title":"Redux Bundler Web Worker Utilities","description":"redux-bundler-worker provides utilities for offloading an entire redux-bundler application into a Web Worker, allowing the main thread to focus solely on rendering. It achieves this by offering a `getStoreProxy` function for the main thread, which mimics the redux-bundler store API, and a `setUpWorker` function for the worker thread to initialize the actual redux-bundler store. This approach aims to demonstrate a feature-complete mechanism for isolating Redux logic. The current stable version, `0.0.3`, is explicitly stated as being \"largely for demonstration purposes\" and not shipped in any production applications by its author. As such, it does not have a clear release cadence and should be considered experimental. Its key differentiator is the complete isolation of Redux state management and logic within a worker, reducing main thread overhead.","status":"abandoned","version":"0.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/HenrikJoreteg/redux-bundler-worker","tags":["javascript","redux-bundler","webworker","worker"],"install":[{"cmd":"npm install redux-bundler-worker","lang":"bash","label":"npm"},{"cmd":"yarn add redux-bundler-worker","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-bundler-worker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This library is an extension for redux-bundler; a working redux-bundler store is essential for its functionality in the worker thread.","package":"redux-bundler","optional":false}],"imports":[{"note":"Used in the main thread to create a proxy that communicates with the worker-based Redux store. This library is designed for ESM imports.","wrong":"const getStoreProxy = require('redux-bundler-worker').getStoreProxy","symbol":"getStoreProxy","correct":"import { getStoreProxy } from 'redux-bundler-worker'"},{"note":"Used inside the Web Worker script to initialize the actual redux-bundler store and establish communication with the main thread. This library is designed for ESM imports.","wrong":"const setUpWorker = require('redux-bundler-worker').setUpWorker","symbol":"setUpWorker","correct":"import { setUpWorker } from 'redux-bundler-worker'"}],"quickstart":{"code":"/* --- main.js (Main Thread) --- */\nimport { render, h } from 'preact';\nimport { Provider } from 'redux-bundler-preact';\nimport { getStoreProxy } from 'redux-bundler-worker';\n\n// A dummy RootComponent for demonstration\nconst RootComponent = ({ children }) => h('div', null, h('h1', null, 'App Running in Worker'), children);\n\n// Create the Web Worker instance, pointing to your bundled worker script\n// Ensure '/build/worker.js' is correctly served by your web server/bundler\nconst worker = new Worker('/build/worker.js', { type: 'module' });\n\n// Get a store proxy that mimics the redux-bundler store API\n// All actions dispatched and selectors called on this proxy will be marshalled to the worker\nconst storeProxy = getStoreProxy(worker);\n\n// Render your Preact app, passing the store proxy to the Provider\nrender(\n  h(Provider, { store: storeProxy }, h(RootComponent)),\n  document.getElementById('app-root')\n);\n\nconsole.log('Main thread initialized with worker-proxied Redux store.');\n\n/* --- worker.js (Web Worker Thread) --- */\nimport { composeBundles } from 'redux-bundler';\nimport { setUpWorker } from 'redux-bundler-worker';\n\n// Define a simple Redux Bundler bundle inside the worker\nconst appBundle = {\n  name: 'app',\n  reducer: (state = { count: 0 }, action) => {\n    if (action.type === 'INCREMENT') {\n      return { ...state, count: state.count + 1 };\n    }\n    return state;\n  },\n  doIncrement: () => ({ dispatch }) => {\n    dispatch({ type: 'INCREMENT' });\n  },\n  selectCount: (state) => state.app.count,\n};\n\n// Compose the bundles to create the main Redux Bundler store function\nconst getWorkerStore = (initialData = {}) => composeBundles(appBundle)(initialData);\n\n// Set up the worker, passing the function that returns the composed store\nsetUpWorker(getWorkerStore);\n\nconsole.log('Web Worker initialized with Redux Bundler store.');\n\n// Example of interacting from the main thread after setup (e.g., in browser console)\n// window.store = storeProxy; // expose for debugging\n// storeProxy.doIncrement();\n// storeProxy.selectCount();","lang":"javascript","description":"This example demonstrates how to set up `redux-bundler-worker` by initializing a Web Worker in the main thread and establishing a proxied Redux store for communication. It shows how to use `getStoreProxy` in the main thread with a UI library like Preact and `setUpWorker` inside the Web Worker to host the actual `redux-bundler` instance, including a basic bundle with actions and selectors."},"warnings":[{"fix":"Consider `redux-bundler` directly for production apps. If Web Worker offloading is critical, thoroughly test and consider the implications of using an experimental library.","message":"The author explicitly states this library is 'largely for demonstration purposes' and has not been used in production. It is not recommended for production environments due to potential instability, lack of active maintenance, and its experimental nature.","severity":"breaking","affected_versions":">=0.0.2"},{"fix":"Utilize `console.log` within the worker, set up custom message logging, or explore specialized browser extensions/tools for Web Worker debugging.","message":"Debugging state and actions within a Web Worker can be significantly more complex than in the main thread. Standard Redux DevTools might not work out-of-the-box without additional custom integration for message passing.","severity":"gotcha","affected_versions":">=0.0.2"},{"fix":"Implement explicit message passing between the worker and main thread for any operations that require main thread context or browser APIs. `redux-bundler` itself mentions supporting this via 'reactor' patterns.","message":"Interacting with the DOM, browser APIs (like `localStorage`, `indexedDB` directly, or `geolocation`), or global event listeners from within the Web Worker is not possible. Operations requiring main thread access must be explicitly marshalled back.","severity":"gotcha","affected_versions":">=0.0.2"},{"fix":"Optimize state structure, send only necessary deltas, and carefully consider what data needs to be passed between threads. Profile performance to identify bottlenecks.","message":"The overhead of serializing and deserializing state and actions for message passing between the main thread and the worker can impact performance, especially with large or frequently updated state objects.","severity":"gotcha","affected_versions":">=0.0.2"},{"fix":"Ensure your build tooling is configured to handle ES Modules within Web Workers. Verify the `worker.js` file and its imports are correctly bundled and served with the `type: 'module'` option for the Worker constructor.","message":"Web Worker module resolution (importing other modules within the worker script) can be tricky and requires proper bundler configuration (e.g., Webpack's worker-loader or modern bundlers supporting ESM workers) to ensure all dependencies are correctly included and paths are resolved.","severity":"gotcha","affected_versions":">=0.0.2"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Web Workers are a browser-specific API. Ensure your code runs in a browser environment. If testing, use a browser-like testing environment (e.g., JSDOM with Web Worker polyfills if absolutely necessary, but generally avoided for worker-specific logic).","cause":"Attempting to instantiate a `Worker` object in a Node.js environment or a non-browser context.","error":"ReferenceError: Worker is not defined"},{"fix":"Ensure that the Web Worker is fully loaded and `setUpWorker` has been called successfully within it. Add logging to both main and worker threads to track initialization status. Also, verify that the selector name (`select...`) actually exists in your bundles.","cause":"The `storeProxy` has not yet fully initialized or established communication with the worker, or the `redux-bundler` store inside the worker hasn't finished composing its bundles and exposing selectors.","error":"Uncaught TypeError: storeProxy.select... is not a function"},{"fix":"Verify the path to your `worker.js` file is correct and accessible at runtime. Check your web server or bundler configuration to ensure `worker.js` is served with the correct MIME type (e.g., `application/javascript` or `text/javascript`) and that the file exists at the specified URL. For ES Modules in workers, ensure `new Worker('/path/to/worker.js', { type: 'module' })` is used.","cause":"The browser failed to load the worker script (`/build/worker.js`) because the server returned an HTML page (e.g., a 404 error page) instead of a JavaScript module, or the server is not configured to serve `.js` files with the correct `application/javascript` MIME type for module workers.","error":"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of \"text/html\"."},{"fix":"Check your Content Security Policy (CSP) for `worker-src` or `script-src` directives that might be blocking Web Workers. Ensure you are running in a standard browser environment. Some older browser versions or highly restricted environments might not fully support Web Workers or ESM workers.","cause":"Trying to use `new Worker()` in an environment where the global `Worker` object is not available or is not a constructible function, possibly due to strict Content Security Policy (CSP) or an unusual execution environment.","error":"Error: Worker is not a constructor"}],"ecosystem":"npm"}