Use `watch` utility in `frame-sync`

src/sidebar/services/frame-sync.js

@@ -5,6 +5,7 @@ import events from '../events';
 import Discovery from '../../shared/discovery';
 import uiConstants from '../ui-constants';
 import * as metadata from '../util/annotation-metadata';
+import { watch } from '../util/watch';
 
 /**
  * @typedef FrameInfo
@@ -49,25 +50,17 @@ export default function FrameSync($rootScope, $window, store, bridge) {
    * notify connected frames about new/updated/deleted annotations.
    */
   function setupSyncToFrame() {
-    // List of loaded annotations in previous state
-    let prevAnnotations = [];
-    let prevFrames = [];
     let prevPublicAnns = 0;
 
-    store.subscribe(function () {
-      const state = store.getState();
-      if (
-        state.annotations.annotations === prevAnnotations &&
-        state.frames === prevFrames
-      ) {
-        return;
-      }
-
+    watch(
+      store.subscribe,
+      [() => store.getState().annotations.annotations, () => store.frames()],
+      ([annotations, frames], [prevAnnotations]) => {
         let publicAnns = 0;
         const inSidebar = new Set();
         const added = [];
 
-      state.annotations.annotations.forEach(function (annot) {
+        annotations.forEach(function (annot) {
           if (metadata.isReply(annot)) {
             // The frame does not need to know about replies
             return;
@@ -85,8 +78,6 @@ export default function FrameSync($rootScope, $window, store, bridge) {
         const deleted = prevAnnotations.filter(function (annot) {
           return !inSidebar.has(annot.$tag);
         });
-      prevAnnotations = state.annotations.annotations;
-      prevFrames = state.frames;
 
         // We currently only handle adding and removing annotations from the frame
         // when they are added or removed in the sidebar, but not re-anchoring
@@ -102,7 +93,6 @@ export default function FrameSync($rootScope, $window, store, bridge) {
           inFrame.delete(annot.$tag);
         });
 
-      const frames = store.frames();
         if (frames.length > 0) {
           if (
             frames.every(function (frame) {
@@ -118,7 +108,8 @@ export default function FrameSync($rootScope, $window, store, bridge) {
             }
           }
         }
-    });
+      }
+    );
   }
 
   /**

src/sidebar/services/test/frame-sync-test.js

@@ -55,7 +55,7 @@ describe('sidebar/services/frame-sync', function () {
 
   beforeEach(function () {
     fakeStore = createFakeStore(
-      { annotations: [] },
+      { annotations: { annotations: [] } },
       {
         connectFrame: sinon.stub(),
         destroyFrame: sinon.stub(),