├── README.md
├── index.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | # Redux Persist Crosstab
 2 | Add cross tab syncing to your [redux](https://github.com/gaearon/redux) app with 1 line. This tiny module listens to the window for [redux-persist](https://github.com/rt2zz/redux-persist) storage events. When an event occurs it will dispatch a rehydrate action.
 3 | 
 4 | ### Usage
 5 | ```js
 6 | import { createStore, compose } from 'redux'
 7 | import { persistStore, autoRehydrate } from 'redux-persist'
 8 | import crosstabSync from 'redux-persist-crosstab'
 9 | const finalCreateStore = compose(autoRehydrate())(createStore)
10 | const store = finalCreateStore(reducer)
11 | 
12 | const persistor = persistStore(store, {})
13 | crosstabSync(persistor)
14 | ```
15 | 
16 | To blacklist some portion of state, for example if you want to avoid syncing route state:
17 | ```js
18 | crosstabSync(persistor, {blacklist: ['routeReducerKey']})
19 | ```
20 | 
21 | ### Rehydration Merge
22 | Redux Persist does a shallow merge of state during rehydration. This means that if state changes on two tabs simulataneously, it is possible that legitimate state will be lost in the merge. In most cases this will not be an issue. One scenario where this could happen is if both tabs are listening on a socket and they both receive a message at the same time. If you have this type of set up you will either need to blacklist the relevant reducers or implement a custom rehydration handler that takes into account the nuances of this situation. 
23 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { KEY_PREFIX, REHYDRATE } from 'redux-persist/lib/constants'
 3 | import type { PersistConfig } from 'redux-persist/es/types'
 4 | import type { Store } from 'redux'
 5 | 
 6 | type CrosstabConfig = {
 7 |   blacklist?: ?Array<string>,
 8 |   keyPrefix?: ?string,
 9 |   whitelist?: ?Array<string>,
10 | }
11 | 
12 | module.exports = function (store: Store, persistConfig: PersistConfig, crosstabConfig: CrosstabConfig = {}) {
13 |   const blacklist: ?Array<string> = crosstabConfig.blacklist || null
14 |   const whitelist: ?Array<string> = crosstabConfig.whitelist || null
15 |   const keyPrefix: string = crosstabConfig.keyPrefix || KEY_PREFIX
16 | 
17 |   const { key }: { key: string } = persistConfig
18 | 
19 |   window.addEventListener('storage', handleStorageEvent, false)
20 | 
21 |   function handleStorageEvent (e) {
22 |     if (e.key && e.key.indexOf(keyPrefix) === 0) {
23 |       if (e.oldValue === e.newValue) {
24 |         return
25 |       }
26 | 
27 |       const statePartial: { [string]: string } = JSON.parse(e.newValue)
28 | 
29 |       /* eslint-disable flowtype/no-weak-types */
30 |       const state: Object = Object.keys(statePartial).reduce((state, reducerKey) => {
31 |         /* eslint-enable flowtype/no-weak-types */
32 |         if (whitelist && whitelist.indexOf(reducerKey) === -1) {
33 |           return state
34 |         }
35 |         if (blacklist && blacklist.indexOf(reducerKey) !== -1) {
36 |           return state
37 |         }
38 | 
39 |         state[reducerKey] = JSON.parse(statePartial[reducerKey])
40 | 
41 |         return state
42 |       }, {})
43 | 
44 |       store.dispatch({
45 |         key,
46 |         payload: state,
47 |         type: REHYDRATE,
48 |       })
49 |     }
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "redux-persist-crosstab",
 3 |   "version": "4.0.0-0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "exit 0"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/rt2zz/redux-persist-crosstab.git"
12 |   },
13 |   "homepage": "https://github.com/rt2zz/redux-persist-crosstab",
14 |   "keywords": [
15 |     "redux",
16 |     "localstorage",
17 |     "redux-persist",
18 |     "redux-storage",
19 |     "redux-rehydrate"
20 |   ],
21 |   "peerDependencies": {
22 |     "redux-persist": ">=3.5.0"
23 |   },
24 |   "author": "rt2zz <zack@root-two.com>",
25 |   "license": "MIT"
26 | }
27 | 


--------------------------------------------------------------------------------