{"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.","language":"javascript","status":"maintenance","last_verified":"Thu Apr 23","install":{"commands":["npm install redux-hub-middleware"],"cli":null},"imports":["import createReduxHub from 'redux-hub-middleware';","import createReduxHub from 'redux-hub-middleware';\nconst { connect } = createReduxHub();","import createReduxHub from 'redux-hub-middleware';\nconst { middleware } = createReduxHub();","const createReduxHub = require('redux-hub-middleware');\nconst { connect, middleware } = createReduxHub();"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}