Add component for pausing redux

1 files changed, 13 insertions, 1 deletions

diff --git a/gui/src/renderer/redux/store.ts b/gui/src/renderer/redux/store.ts
index 79700497c6..a8d3a302b6 100644
--- a/gui/src/renderer/redux/store.ts
+++ b/gui/src/renderer/redux/store.ts
@@ -1,6 +1,8 @@
+import { useRef } from 'react';
 import { useSelector as useReduxSelector } from 'react-redux';
 import { combineReducers, compose, createStore, Dispatch } from 'redux';
 
+import { usePause } from '../lib/pause-rendering';
 import accountActions, { AccountAction } from './account/actions';
 import accountReducer, { IAccountReduxState } from './account/reducers';
 import connectionActions, { ConnectionAction } from './connection/actions';
@@ -64,6 +66,16 @@ function composeEnhancers(): typeof compose {
     : compose();
 }
 
+// This hook adds typing to state to make use simpler. It also prevents the state from update if the
+// ReduxPause context has been told to pause updates caused by new values in the redux state.
 export function useSelector<R>(fn: (state: IReduxState) => R): R {
-  return useReduxSelector(fn);
+  const [paused] = usePause();
+  const value = useReduxSelector(fn);
+  const valueBeforePause = useRef(value);
+
+  if (!paused) {
+    valueBeforePause.current = value;
+  }
+
+  return paused ? valueBeforePause.current : value;
 }