feat(app): Make store change-observable

This adds true change observability to the store,
as the `.subscribe()` callback triggers with every dispatch,
even if the data didn't change.

Now `store.observe(onChange)` can be used to only be notified
once the state data actually changes

Change-Type: minor

lib/gui/app/app.js

@@ -47,7 +47,6 @@ const driveScanner = require('./modules/drive-scanner')
 const osDialog = require('./os/dialog')
 const exceptionReporter = require('./modules/exception-reporter')
 const updateLock = require('./modules/update-lock')
-const debug = require('debug')('etcher:app')
 
 /* eslint-disable lodash/prefer-lodash-method */
 
@@ -191,28 +190,7 @@ app.run(() => {
 })
 
 app.run(() => {
-  debug('store.subscribe')
-
-  function observeStore(store, onChange) {
-    let currentState;
-
-    function handleChange() {
-      debug('store.subscribe:tick')
-      let nextState = store.getState();
-      if (nextState !== currentState) {
-        debug('store.subscribe:onchange')
-        currentState = nextState;
-        onChange(currentState);
-      }
-    }
-
-    let unsubscribe = store.subscribe(handleChange);
-    handleChange();
-    return unsubscribe;
-  }
-
-  observeStore(store, () => {
-    debug('store.subscribe:callback')
+  store.observe(() => {
     if (!flashState.isFlashing()) {
       return
     }
@@ -236,7 +214,6 @@ app.run(() => {
 
     windowProgress.set(currentFlashState)
   })
-
 })
 
 app.run(($timeout) => {

lib/gui/app/models/flash-state.js

@@ -138,8 +138,6 @@ exports.setProgressState = (state) => {
     })
   })
 
-  console.log('store.dispatch', 'SET_FLASH_STATE')
-
   store.dispatch({
     type: store.Actions.SET_FLASH_STATE,
     data

lib/gui/app/models/store.js

@@ -508,3 +508,20 @@ module.exports = _.merge(redux.createStore(storeReducer, DEFAULT_STATE), {
   Actions: ACTIONS,
   Defaults: DEFAULT_STATE
 })
+
+module.exports.observe = (onChange) => {
+  let currentState
+
+  function changeHandler() {
+    const nextState = module.exports.getState()
+    if (!_.isEqual(nextState, currentState)) {
+      currentState = nextState
+      onChange(currentState)
+    }
+  }
+
+  const unsubscribe = module.exports.subscribe(changeHandler)
+  changeHandler()
+  return unsubscribe
+}
+

lib/gui/app/modules/image-writer.js

@@ -313,7 +313,6 @@ exports.flash = (image, drives) => {
   analytics.logEvent('Flash', analyticsData)
 
   return exports.performWrite(image, drives, (state) => {
-    console.log('performWriate.onProgress', state)
     flashState.setProgressState(state)
   }).then(flashState.unsetFlashingFlag).then(() => {
     if (flashState.wasLastFlashCancelled()) {

lib/gui/app/pages/main/controllers/flash.js

@@ -140,10 +140,7 @@ module.exports = function (
 
     // Trigger Angular digests along with store updates, as the flash state
     // updates. Without this there is essentially no progress to watch.
-    const unsubscribe = store.subscribe(() => {
-      debug('store.onChange')
-      $timeout()
-    })
+    const unsubscribe = store.observe($timeout)
 
     const iconPath = '../../../assets/icon.png'