paragon-sync-client

Paragon Client Synchronization Library

This library enables synchronising the state of a redux app across multiple clients. It works with sync-server to distribute the state using a master client and then replicate every redux action across all connected clients.

Installing

1. npm install --save-dev paragon-sync-client

Example

Check out the sync-client-demo repository for a proof-of-concept redux app using this library.

// Creating an instance of SyncClient begins the process of connecting to the server and preparing
//   to receive remote actions
const client = new SyncClient({
   // The websocket url of a running sync-server
  serverUrl: 'ws://localhost:9090',

  // State will be synchronized with all other clients in the specified room
  room: 'pdf-client.job.42', 

  // (optional): you can whitelist only the actions that should be synchronized.
  synchronizedActions: ['SOMETHING_HAPPENED', 'SOMETHING_ELSE_HAPPENED'],

  // (optional): you can whitelist only the parts of state that should be synchronized.
  //   Currently if you whitelist any part of the state you must also whitelist every action that might
  //   cause that state to change.  However this will become more flexible in the future.
  synchronizedState: [
    'annotations.annotationData',
    {
      documents: ['pdfData', 'pdfCount']
    }
  ]
});

// Wrap the application's root reducer using `synchronizedReducer`, and make sure to install 
//   the sync middleware into your redux store
const reduxStore = createStore(createSynchronizedReducer(rootReducer), client.middleware);

// After the store is created using the synchronized reducer and middleware, call #synchronize
//   to begin synchronizing it with any other clients in the specified room
client.synchronize(reduxStore);

// The connect event will fire as soon as a successful connection has been made to the synchronization server
client.on('connect', () => {
  // If possible, it's helpful to load the redux store's initial state from the master client to
  //   ensure consistency
  if (client.hasMaster) client.loadInitialStateFromMaster();
});