piotr-cz/redux-broadcast-middleware

Lightweight Redux middleware to sync state across browser tabs/ windows using BroadcastChannel

Redux crosstab broadcast channel middleware

Lightweight Redux middleware to sync state across browser tabs/ windows with same origin (browsing context) using BroadcastChannel.

When BroadcastChannel interface isn't available (at the moment only Chrome 54+ or Firefox 38+ are supported) middleware is opaque - does nothing. For list of polyfills is see this Web fundamentals article.

Installation

npm install --save @piotr-cz/redux-broadcast-middleware

or

yarn add @piotr-cz/redux-broadcast-middleware

Setup

Import the middleware and include it in applyMiddleware when creating Redux store:

// configureStore.js

import reduxBroadcastMiddleware from '@piotr-cz/redux-broadcast-middleware'

//...

const store = createStore(
  rootReducer,
  applyMiddleware(
    reduxBroadcastMiddleware(
      'state-channel',
      ['DO_NOT_SYNC_THIS_ACTION']
    )
  )
)

Options

• {string} Channel name - Used for broadcasting and listening to
• {Array} Blacklist - Array of additional actions that should be ignored

Notes

• Middleware doesn't sync Redux-persist actions (starting with persist/ prefix) by puprose
• Errors, Functions and DOM nodes cannot be broadcasted. For more info read MDN: The structured clone algorithm

Similar projects

• cross-tab-middleware - redux middleware, uses localStorage to sync
• Redux-State-Sync - redux middlware, uses localStorage to sync
• Redux Persist Crosstab - redux persist rehdration, uses localsStorage to sync