{"id":17904,"library":"redux-hub-middleware","title":"Redux Hub Middleware","description":"This Redux middleware addresses the challenge of managing multiple, isolated Redux stores within a single application, a common pattern in large React/Redux projects with distinct sub-applications. It provides a mechanism, a 'hub', to re-dispatch actions across all connected stores, effectively synchronizing state changes that originate from any single store. The current stable version is 1.0.4. While the package hasn't seen recent major updates since its initial releases, its core functionality remains relevant for specific multi-store architectures. Its key differentiator is providing a simple, explicit hub for action propagation without merging states or requiring complex global state management solutions, allowing individual stores to retain their isolation while enabling cross-store communication.","status":"maintenance","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/denisnd/redux-hub-middleware","tags":["javascript","redux","middleware","hub"],"install":[{"cmd":"npm install redux-hub-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add redux-hub-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-hub-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for Redux store creation and middleware integration. The library itself is a Redux middleware.","package":"redux","optional":false}],"imports":[{"note":"The library exports `createReduxHub` as a default export, which then returns an object containing `connect` and `middleware` functions.","wrong":"import { createReduxHub } from 'redux-hub-middleware';","symbol":"createReduxHub","correct":"import createReduxHub from 'redux-hub-middleware';"},{"note":"`connect` is a function returned by calling the default export `createReduxHub()`, not a direct named export.","wrong":"import { connect } from 'redux-hub-middleware';","symbol":"connect","correct":"import createReduxHub from 'redux-hub-middleware';\nconst { connect } = createReduxHub();"},{"note":"`middleware` is a function returned by calling the default export `createReduxHub()`, not a direct named export.","wrong":"import { middleware } from 'redux-hub-middleware';","symbol":"middleware","correct":"import createReduxHub from 'redux-hub-middleware';\nconst { middleware } = createReduxHub();"},{"note":"For CommonJS, `require` returns the default export, which then needs to be called to get the `connect` and `middleware` functions.","wrong":"const { createReduxHub } = require('redux-hub-middleware');","symbol":"CommonJS require","correct":"const createReduxHub = require('redux-hub-middleware');\nconst { connect, middleware } = createReduxHub();"}],"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport createReduxHub from 'redux-hub-middleware';\n\n// Create a Redux Hub instance\nconst hub = createReduxHub();\n\n// Define two simple reducers for separate stores\nfunction reducer1(state = 'Store 1 initial state', action) {\n  if (action.type === 'CHANGE_VALUE') {\n    return action.payload;\n  }\n  return state;\n}\n\nfunction reducer2(state = 'Store 2 initial state', action) {\n  if (action.type === 'CHANGE_VALUE') {\n    return action.payload;\n  }\n  return state;\n}\n\n// Create two Redux stores, each applying the hub's middleware\nconst store1 = createStore(reducer1, applyMiddleware(hub.middleware));\nconst store2 = createStore(reducer2, applyMiddleware(hub.middleware));\n\n// Connect both stores to the Redux Hub\nhub.connect(store1);\nhub.connect(store2);\n\nconsole.log('Initial State Store 1:', store1.getState());\nconsole.log('Initial State Store 2:', store2.getState());\n\n// Dispatch an action on store1\nstore1.dispatch({ type: 'CHANGE_VALUE', payload: 'Value changed by Store 1' });\n\nconsole.log('After Store 1 dispatch:');\nconsole.log('Store 1:', store1.getState()); // Should reflect change\nconsole.log('Store 2:', store2.getState()); // Should also reflect change due to hub\n\n// Dispatch an action on store2\nstore2.dispatch({ type: 'CHANGE_VALUE', payload: 'Value changed by Store 2' });\n\nconsole.log('After Store 2 dispatch:');\nconsole.log('Store 1:', store1.getState()); // Should reflect change\nconsole.log('Store 2:', store2.getState()); // Should also reflect change","lang":"javascript","description":"Demonstrates creating two isolated Redux stores, connecting them via `redux-hub-middleware`, and showing how actions dispatched on one store propagate to all connected stores."},"warnings":[{"fix":"Implement robust action type checking or specific reducer logic to ignore irrelevant actions in certain stores, or consider using action prefixes/suffixes for store-specific actions.","message":"Actions dispatched through the hub are re-dispatched to *all* connected stores. Ensure your reducers are designed to handle actions appropriately, or you may experience unintended state changes across stores that should remain isolated from certain actions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"When using Redux Toolkit, pass `hub.middleware` directly into the `middleware` array of `configureStore` (e.g., `configureStore({ reducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(hub.middleware) })`).","message":"This package uses the `createStore` and `applyMiddleware` functions from the core `redux` library, which are considered legacy in modern Redux development. Redux Toolkit's `configureStore` is the recommended approach. While functionally compatible, integrating `redux-hub-middleware` with `configureStore` requires careful manual middleware configuration.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Monitor performance closely. If bottlenecks occur, evaluate if all actions truly need to be propagated to all stores. Consider alternative patterns like selective store listeners or a more granular messaging system for complex scenarios.","message":"Performance may be impacted in applications with a very large number of connected stores or extremely high-frequency action dispatches, as each action is processed and re-dispatched potentially multiple times across the hub.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If experiencing TypeScript errors with custom middleware, implement type guards (e.g., `isAction(action)`) before accessing properties of the `action` object. The `redux-hub-middleware` library itself may or may not provide updated types for Redux v5 compatibility.","message":"Redux v5.0.0 and Redux Toolkit v2.0.0 introduced changes to middleware typing, where `action` and `next` parameters are typed as `unknown`. Middleware written against older Redux types might require updates to explicitly type-guard actions. While `redux-hub-middleware` itself is unlikely to break, custom middleware used in conjunction with it might.","severity":"breaking","affected_versions":"Redux >=5.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Ensure you call `createReduxHub()` to get the hub instance: `const hub = createReduxHub();`","cause":"The `createReduxHub()` function was not called, or its return value was not assigned to `hub` (e.g., `const hub = createReduxHub();`). The `connect` and `middleware` properties are on the object returned by the function call.","error":"TypeError: hub.connect is not a function"},{"fix":"Verify that `applyMiddleware(hub.middleware)` is used when creating each store, and that `hub.connect(store)` is explicitly called for every store intended to participate in the hub.","cause":"Either the `hub.middleware` was not applied to one or more stores, or `hub.connect(store)` was not called for all desired stores.","error":"Store state not synchronizing across connected stores"},{"fix":"Modify your `configureStore` call to include `getDefaultMiddleware()` when adding `redux-hub-middleware`: `middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(hub.middleware)`.","cause":"When using Redux Toolkit's `configureStore`, if you provide a custom `middleware` array, you must explicitly include `getDefaultMiddleware()` to retain RTK's built-in middleware (like thunk and RTK Query's middleware).","error":"Warning: Middleware for RTK-Query API at reducerPath \"...\" has not been added to the store."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}