Merge pull request #1712: Consider enabling default middleware checks…

… on Redux store

README.md

@@ -75,6 +75,18 @@ If you are editing source code, running the following command will allow hot-rel
 auspice develop --datasetDir data
 ```
 
+#### Environment variables
+
+The client looks for some environment variables. All are optional.
+
+> [!NOTE]
+> This is an incomplete list. For other variables, search for `process.env.` in the codebase.
+
+- `SKIP_REDUX_CHECKS`: Set this to a truthy value to improve dev server responsiveness. Useful when you see a console warning like this:
+
+    > ImmutableStateInvariantMiddleware took 200ms, which is more than the warning threshold of 32ms.
+    > If your state or actions are very large, you may want to disable the middleware as it might cause too much of a slowdown in development mode.
+
 ### CLI (Command Line Interface)
 
 Run `auspice --help` or `auspice view --help` to see all the available command line options.

src/store.ts

@@ -13,12 +13,27 @@ const middleware = [
 const store = configureStore({
   reducer: rootReducer,
   middleware: (getDefaultMiddleware) =>
+    // This adds the thunk middleware, and for development builds, other useful checks.
     getDefaultMiddleware({
-      // TODO: Go through reducers and see why the state is not immutable nor serializable.
-      // These were not checked prior to the adoption of Redux Toolkit, and were not
-      // investigated to minimize conversion efforts.
-      immutableCheck: false,
-      serializableCheck: false
+      // Immutability can't be checked in some parts of the state due to circular references.
+      // Allow the option to disable this check through an environment variable.
+      // Note that it is never enabled when NODE_ENV=production.
+      immutableCheck: process.env.SKIP_REDUX_CHECKS
+        ? false
+        : {
+          ignoredPaths: [
+            'tree.nodes',
+            'tree.vaccines',
+            'treeToo.nodes',
+            'treeToo.vaccines',
+          ],
+        },
+
+      // By design, the state contains many values that are non-serializable.
+      // Instead of adding several ignoredPaths, disable this check entirely.
+      // This means time-travel debugging is not possible, but it would not be
+      // performant enough given the large size of the Redux state.
+      serializableCheck: false,
     }).concat(middleware),
   devTools: process.env.NODE_ENV !== 'production',
 })

webpack.config.js

@@ -67,6 +67,7 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
   const pluginProcessEnvData = new webpack.DefinePlugin({
     "process.env": {
       NODE_ENV: devMode ? JSON.stringify("development") : JSON.stringify("production"),
+      SKIP_REDUX_CHECKS: JSON.stringify(process.env.SKIP_REDUX_CHECKS),
       EXTENSION_DATA: JSON.stringify(extensionData)
     }
   });