redux-broadcast

Broadcast redux actions to separate tabs and windows

This package uses the Broadcast Channel API and does not use local storage. See caniuse.com to view current browser support.

Setup

Add the reducers:

import { combineReducers } from "redux";
import { reducers } from "redux-broadcast";

import reducer1 from "./path/to/reducer1";
import reducer2 from "./path/to/reducer2";

export default combineReducers({
  reducer1,
  reducer2,
  ...reducers
});

Add the middleware:

import { applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { middleware } from "redux-broadcast";

applyMiddleware([thunk, ...middleware]);

Start the broadcast channel with a reference to the store:

import broadcast from "redux-broadcast";

const store = createStore();

broadcast(store);

Basic Usage

Add the broadcast key to any action. The broadcast field will be removed from the action and the action will be broadcasted to other tabs and windows.

export const myActionToSelf = () => (dispatch, getState) => {
  dispatch({
    type: "MY_ACTION"
  });
};

export const myActionToSelfAndOthers = () => (dispatch, getState) => {
  dispatch({
    type: "MY_ACTION"
    broadcast: true
  });
};

Integration

React

redux-broadcast provides a Higher-Order Component for react. The HOC will register/unregister the instance on page load and close.

Usage

import { broadcasted } from "redux-broadcast";

const App = () => {
  return <div>React app</div>;
};

export default broadcasted(App);