Registry / web-framework / redux-state-sync

redux-state-sync

JSON →
library3.1.4jsnpmunverified

A lightweight middleware for syncing Redux state across browser tabs using the Broadcast Channel API with a fallback via pubkey's broadcast-channel. Current stable version 3.1.4. Released under MIT license, maintained actively. Key differentiator: minimal configuration, automatic tab synchronization, and built-in state initialization from other tabs. Incompatible with functions in action payloads due to structured clone algorithm.

npm install redux-state-sync
INSTALL
IMPORT
SIG · REDUX-STATE-SYNC
R
redux-state-sync
web-frameworkjavascriptv3.1.4
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

createStateSyncMiddleware
import { createStateSyncMiddleware, initMessageListener, initStateWithPrevTab, withReduxStateSync } from 'redux-state-sync';
const createStateSyncMiddleware = require('redux-state-sync').createStateSyncMiddleware;
Package provides named exports only. CommonJS require is possible but TypeScript types require ESM import.
initMessageListener
import { initMessageListener } from 'redux-state-sync';
import initMessageListener from 'redux-state-sync';
Default import does not work; must use named import.
withReduxStateSync
import { withReduxStateSync } from 'redux-state-sync';
const withReduxStateSync = require('redux-state-sync').withReduxStateSync;
Used to wrap root reducer for state rehydration from other tabs.

Shows full setup: create middleware, wrap reducer, init state from previous tab, and blacklist an action type.

import { createStore, applyMiddleware, combineReducers } from 'redux'; import { createStateSyncMiddleware, initStateWithPrevTab, withReduxStateSync } from 'redux-state-sync'; const config = { blacklist: ['TOGGLE_TODO'] }; const middlewares = [createStateSyncMiddleware(config)]; const rootReducer = combineReducers({ todos: (state = [], action) => state, visibilityFilter: (state = 'SHOW_ALL', action) => state }); const store = createStore( withReduxStateSync(rootReducer), applyMiddleware(...middlewares) ); initStateWithPrevTab(store); // Now dispatch actions normally; other tabs will sync automatically
Debug
Known issues
breakingIn v3, initMessageListener is no longer needed if using initStateWithPrevTab; calling both can cause double initialization.
fix
Use initStateWithPrevTab(store) alone; remove initMessageListener(store) if present.
affects: >=3.0.0
gotchaFunction references in action payloads will cause errors because BroadcastChannel uses structured clone algorithm which does not support functions.
fix
Ensure all action payloads are plain serializable objects.
affects: all
gotchaWhen using redux-persist, PERSIST and REHYDRATE actions must be blacklisted to avoid infinite loops.
fix
Add 'persist/PERSIST' and 'persist/REHYDRATE' to the blacklist config.
affects: all
breakingTypeScript types are not bundled; you must install @types/redux-state-sync separately (now deprecated, consider adding own types).
fix
Install @types/redux-state-sync or define your own types.
affects: >=3.0.0
gotchaBroadcastChannel may not be supported in older browsers (e.g., Safari < 15.4). The fallback via broadcast-channel library works but has performance implications.
fix
Check compatibility or use alternatives if targeting very old browsers.
affects: all
Errors
Common errors & fixes
Error: Actions must be plain objects. Use custom middleware for async actions.
An action with a function payload is dispatched, which violates serialization requirement.
fix
Remove functions from action payloads or serialize them before dispatch.
TypeError: store.dispatch is not a function
initMessageListener or initStateWithPrevTab is called before the store is fully created or passed incorrectly.
fix
Ensure store is passed directly: initStateWithPrevTab(store); do not wrap store in another function.
Module not found: Can't resolve 'redux-state-sync'
Package not installed; or using bundler with incorrect module resolution.
fix
Run npm install redux-state-sync and ensure node_modules is present.
Upgrade
Version history
3.1.4latest on npm
Audit
Dependencies
reduxrequiredPeer dependency required for middleware integration with Redux store.
broadcast-channelrequiredUsed as a fallback for BroadcastChannel API in unsupported browsers.
Agent activity
9 hits · last 30 days
node
8
OpenAI (training)
1
Resources
redux-state-sync — npm install redux-state-sync · libregistry