![](\"./logo.png\"){kind=logo}
\n \n\n \n \n \n
![](\"https://img.shields.io/travis/AOHUA/redux-state-sync.svg\")
](https://travis-ci.org/AOHUA/redux-state-sync)\n[![](\"https://img.shields.io/npm/dm/redux-state-sync.svg\")
](https://www.npmjs.com/package/redux-state-sync)\n\n### Why Redux-State-Sync?\n\n\n\nIt syncs your redux store across tabs with very minimal configuration.\n\nThanks to [BroadcastChannel](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API), we now have a more efficient way to communicate between tabs instead of using any type of local storage. However, Not all the browsers support BroadcastChannel API for now. So I used [pubkey's BroadcastChannel](https://github.com/pubkey/broadcast-channel) to find the best way to communicate between tabs for redux-state-sync. [pubkey's BroadcastChannel](https://github.com/pubkey/broadcast-channel) will make sure that the communication between tabs always works.\n\n### How to install\n\nInstall with npm.\n\n```\nnpm install --save redux-state-sync\n```\n\nInstall with yarn\n\n```\nyarn add redux-state-sync\n```\n\n### TypeScript support\n\nInstall with npm.\n\n```\nnpm install --save-dev @types/redux-state-sync\n```\n\nInstall with yarn\n\n```\nyarn add --dev @types/redux-state-sync\n```\n\nTypes are defined [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e6e55443f88128b6393105407c8e8239cb10509b/types/redux-state-sync/index.d.ts)\n\n### Before you use\n\nPlease take note that BroadcastChannel can only send data that is supported by the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) (Strings, Objects, Arrays, Blobs, ArrayBuffer, Map), so you need to make sure that the actions that you wanna send to other tabs doesn't include any functions in the payload.\n\nIf you are using redux-persist, you may need to blacklist some of the actions that is triggered by redux-persist. e.g. persist/PERSIST, persist/REHYDRATE, etc.\n\n### How to use\n\nCreate the state sync middleware with config:\n\n```javascript\nimport { createStore, applyMiddleware } from 'redux';\nimport { createStateSyncMiddleware, initMessageListener } from 'redux-state-sync';\n\nconst config = {\n // TOGGLE_TODO will not be triggered in other tabs\n blacklist: ['TOGGLE_TODO'],\n};\nconst middlewares = [createStateSyncMiddleware(config)];\nconst store = createStore(rootReducer, {}, applyMiddleware(...middlewares));\n// this is used to pass store.dispatch to the message listener\ninitMessageListener(store);\n```\n\n##### initMessageListener is a new function to fix the bug that if the other tab not triggering any action on first load, it cannot receive any messages.\n\nInit new tabs with existing state:\n\n1. Use initStateWithPrevTab to get existing state from other tabs\n\n```javascript\nimport { createStore, applyMiddleware } from 'redux';\nimport { createStateSyncMiddleware, initStateWithPrevTab } from 'redux-state-sync';\n\nconst config = {\n // TOGGLE_TODO will not be triggered in other tabs\n blacklist: ['TOGGLE_TODO'],\n};\nconst middlewares = [createStateSyncMiddleware(config)];\nconst store = createStore(rootReducer, {}, applyMiddleware(...middlewares));\n// init state with other tabs\ninitStateWithPrevTab(store);\n// initMessageListener(store);\n```\n\n##### Note: if you are already using initStateWithPrevTab, you don't need to initMessageListener anymore.\n\n2. Wrap your root reducer with `withReduxStateSync`\n\n```javascript\nimport { withReduxStateSync } from 'redux-state-sync';\nconst rootReducer = combineReducers({\n todos,\n visibilityFilter,\n});\n\nexport default withReduxStateSync(rootReducer);\n```\n\n##### Note: ignore this if you are using `redux-persist`, because you will always inite your app with the state in the storage. However, if you don't want to persist the state in the storage and still want to init new tabs with opening tabs' state, you can follow the example above.\n\n### Config\n\n#### channel\n\nUnique name for Broadcast Channel\n\ntype: `String`\n\ndefault: \"redux_state_sync\"\n\n```javascript\nconst config = {\n channel: 'my_broadcast_channel',\n};\nconst middlewares = [createStateSyncMiddleware(config)];\n```\n\n#### predicate\n\nA function to let you filter the actions as you wanted.\n\n##### Note: Since version 3.0 the function receives the action itself and not only the action type.\n\ntype: `Function`\n\ndefault: null\n\n```javascript\nconst config = {\n // All actions will be triggered in other tabs except 'TOGGLE_TODO'\n predicate: action => action.type !== 'TOGGLE_TODO',\n};\nconst middlewares = [createStateSyncMiddleware(config)];\n```\n\n#### blacklist\n\nA list of action types that you don't want to be triggered in other tabs.\n\ntype: `ArrayOf(