Add Redux DevTools sanitizers

src/index.js

@@ -24,9 +24,40 @@ import './assets/styles/style.scss';
 
 analytics.init();
 
-//Enable REDUX DevTools if in dev mode
+// Enable Redux DevTools if in dev mode
 console.log('dev mode: ', constants.DEV_MODE);
-const composeEnhancers = constants.DEV_MODE ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose;
+
+// Properties fetched from boundary service can be long, so we should prevent Redux DevTools from
+// displaying the whole list and using excessive memory
+const LONG_LIST_THRESHOLD = 20;
+
+const actionSanitizer = (action) => (
+    (action.type === 'FETCH_PROPERTIES_SUCCESS' ||
+    action.type === 'SET_MULTIPLE_SELECTED_PROPERTIES') &&
+    action.payload &&
+    action.payload.length > LONG_LIST_THRESHOLD
+        ? { ...action, payload: '<<LONG_LIST>>' }
+        : action
+);
+const stateSanitizer = (state) => {
+    const landOwnership = state.landOwnership.highlightedProperties.length > LONG_LIST_THRESHOLD
+        ? { ...state.landOwnership, highlightedProperties: '<<LONG_LIST>>' }
+        : state.landOwnership;
+    const relatedProperties = state.relatedProperties.properties.length > LONG_LIST_THRESHOLD
+        ? (state.relatedProperties.selectedProperty.length > LONG_LIST_THRESHOLD
+            ? { ...state.relatedProperties, properties: '<<LONG_LIST>>', selectedProperty: '<<LONG_LIST>>' }
+            : { ...state.relatedProperties, properties: '<<LONG_LIST>>' }
+        )
+        : state.relatedProperties;
+
+    return { ...state, landOwnership, relatedProperties };
+};
+
+const composeEnhancers =
+    constants.DEV_MODE && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+        ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ actionSanitizer, stateSanitizer })
+        : compose;
+
 // Create store from rootReducer with Thunk middleware
 const store = createStore(rootReducer, {}, composeEnhancers(
     applyMiddleware(ReduxThunk)