1.0.1 • Published 5 years ago
redux-sync-reducer v1.0.1
redux-sync-reducer
High order reducer to sync states between tabs.
Installation
npm install --save redux-sync-reducerUsage
Wrap the reducers you want synced between tabs with syncedReducer.
import { syncedReducer } from 'redux-sync-reducer';
syncedReducer(reducer);You also need to add the syncMiddleware when creating your store.
This middleware will dispatch actions when the synced state gets changed in another tab.
import { syncMiddleware } from 'redux-sync-reducer';
const store = createStore(reducers, applyMiddleware(syncMiddleware));API
import { syncedReducer } from 'redux-sync-reducer';
syncedReducer(reducer)
syncedReducer(reducer, config)Config
You can pass a config object to syncedReducer.
| option | default | description |
|---|---|---|
| name | reducer.toString() | Pass a custom name for the reducer.See why you might need this. |
| skipReducer | false | When the state is changed in another tab, it will call your own reducer with the new value. You can skip this by setting skipReducer to true. |
| skipLoading | false | Do not initialize the state with the last value stored in localStorage. |
Common issues
When using multiple different syncedReducers all receive the same state
You are probably wrapping your reducers in another high order reducer (for example handleAction from redux-actions) before passing it to syncedReducer. syncedReducer can't distinguish between the different reducers and you have to set a custom
name when creating it.
export const counter = syncedReducer(handleAction(INCREASE, state => state + 1, { name: 'counter' }));License
redux-sync-reducer is licensed under the MIT License.