From de9f63db33a6aa227ed4843b22448fe5edbb5a6b Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Fri, 13 Oct 2023 16:34:19 -0700 Subject: [PATCH 1/4] Add context for getDefaultMiddleware MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The function name itself isn't very informative. Add more info from the doc page¹. ¹ https://redux-toolkit.js.org/api/getDefaultMiddleware#included-default-middleware --- src/store.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/store.ts b/src/store.ts index 8ea3bee76..3f2231e93 100644 --- a/src/store.ts +++ b/src/store.ts @@ -13,6 +13,7 @@ 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 From 0a2792d1b50ae9fea6a7c278f57918a1589a3936 Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Fri, 13 Oct 2023 16:44:10 -0700 Subject: [PATCH 2/4] Keep serializability check disabled Reasoning added as a comment. --- src/store.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/store.ts b/src/store.ts index 3f2231e93..b7100ae11 100644 --- a/src/store.ts +++ b/src/store.ts @@ -19,7 +19,12 @@ const store = configureStore({ // These were not checked prior to the adoption of Redux Toolkit, and were not // investigated to minimize conversion efforts. immutableCheck: false, - serializableCheck: false + + // 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', }) From 29419489ed1434b679758972490bef1f347957c6 Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Fri, 13 Oct 2023 16:47:41 -0700 Subject: [PATCH 3/4] Partially enable immutability check This is useful but makes things slower upon state changes. I think still reasonable to have because: 1. It's only included in dev mode 2. The slowness in dev mode is not too noticeable (50~200ms on my machine) The console warnings hint to disable it if the slowness becomes unbearable. --- src/store.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/store.ts b/src/store.ts index b7100ae11..ae7e9f8f1 100644 --- a/src/store.ts +++ b/src/store.ts @@ -15,10 +15,15 @@ const store = configureStore({ 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, + immutableCheck: { + // Immutability can't be checked in the following due to circular references. + 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. From a003a322c7d09a9fd4f1bdb169733af3019f4aa1 Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Mon, 16 Oct 2023 10:31:10 -0700 Subject: [PATCH 4/4] Add option to disable immutableCheck through and env var --- README.md | 12 ++++++++++++ src/store.ts | 22 +++++++++++++--------- webpack.config.js | 1 + 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 9fb421cda..abced7709 100644 --- a/README.md +++ b/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. diff --git a/src/store.ts b/src/store.ts index ae7e9f8f1..135128400 100644 --- a/src/store.ts +++ b/src/store.ts @@ -15,15 +15,19 @@ const store = configureStore({ middleware: (getDefaultMiddleware) => // This adds the thunk middleware, and for development builds, other useful checks. getDefaultMiddleware({ - immutableCheck: { - // Immutability can't be checked in the following due to circular references. - ignoredPaths: [ - 'tree.nodes', - 'tree.vaccines', - 'treeToo.nodes', - 'treeToo.vaccines', - ], - }, + // 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. diff --git a/webpack.config.js b/webpack.config.js index fd5cb04df..cf332a42d 100644 --- a/webpack.config.js +++ b/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) } });