diff --git a/src/index.js b/src/index.js index 2538d3e..963e6c3 100644 --- a/src/index.js +++ b/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: '<>' } + : action +); +const stateSanitizer = (state) => { + const landOwnership = state.landOwnership.highlightedProperties.length > LONG_LIST_THRESHOLD + ? { ...state.landOwnership, highlightedProperties: '<>' } + : state.landOwnership; + const relatedProperties = state.relatedProperties.properties.length > LONG_LIST_THRESHOLD + ? (state.relatedProperties.selectedProperty.length > LONG_LIST_THRESHOLD + ? { ...state.relatedProperties, properties: '<>', selectedProperty: '<>' } + : { ...state.relatedProperties, properties: '<>' } + ) + : 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)