redux-relay

redux-relay

Relay redux actions to separate tabs and windows

Setup

Add the redux-relay reducers using combineReducersWithRelay:

import { combineReducersWithRelay } from "redux-relay";

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

export default combineReducersWithRelay({
  reducer1,
  reducer2
});

Add relayMiddleware and start relay with the redux store:

import relay, { relayMiddleware } from "redux-relay";

const store = createStore(
  rootReducer,
  initialState,
  compose(applyMiddleware([...relayMiddleware, ...middleware]))
);

relay(store);

Usage

Add the relay key to any action. The relay 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"
    relay: true
  });
};

Integration

React

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

Usage

import { withRelay } from "redux-relay";

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

export default withRelay(App);