Add caching to serializableStateInvariantMiddleware

Author: Georg Wicke-Arndt

packages/toolkit/src/serializableStateInvariantMiddleware.ts

@@ -36,7 +36,8 @@ export function findNonSerializableValue(
   path: string = '',
   isSerializable: (value: unknown) => boolean = isPlain,
   getEntries?: (value: unknown) => [string, any][],
-  ignoredPaths: readonly string[] = []
+  ignoredPaths: readonly string[] = [],
+  cache?: WeakSet<object>
 ): NonSerializableValue | false {
   let foundNestedSerializable: NonSerializableValue | false
 
@@ -51,6 +52,8 @@ export function findNonSerializableValue(
     return false
   }
 
+  if (cache?.has(value)) return false
+
   const entries = getEntries != null ? getEntries(value) : Object.entries(value)
 
   const hasIgnoredPaths = ignoredPaths.length > 0
@@ -75,7 +78,8 @@ export function findNonSerializableValue(
         nestedPath,
         isSerializable,
         getEntries,
-        ignoredPaths
+        ignoredPaths,
+        cache
       )
 
       if (foundNestedSerializable) {
@@ -84,9 +88,23 @@ export function findNonSerializableValue(
     }
   }
 
+  if (cache && isNestedFrozen(value)) cache.add(value)
+
   return false
 }
 
+export function isNestedFrozen(value: object) {
+  if (!Object.isFrozen(value)) return false
+
+  for (const nestedValue of Object.values(value)) {
+    if (typeof nestedValue !== 'object' || nestedValue === null) continue
+
+    if (!isNestedFrozen(nestedValue)) return false
+  }
+
+  return true
+}
+
 /**
  * Options for `createSerializableStateInvariantMiddleware()`.
  *
@@ -139,6 +157,12 @@ export interface SerializableStateInvariantMiddlewareOptions {
    * Opt out of checking actions. When set to `true`, other action-related params will be ignored.
    */
   ignoreActions?: boolean
+
+  /**
+   * Opt out of caching the results. The cache uses a WeakSet and speeds up repeated checking processes.
+   * The cache is automatically disabled if no browser support for WeakSet is present.
+   */
+  disableCache?: boolean
 }
 
 /**
@@ -165,8 +189,12 @@ export function createSerializableStateInvariantMiddleware(
     warnAfter = 32,
     ignoreState = false,
     ignoreActions = false,
+    disableCache = false,
   } = options
 
+  const cache: WeakSet<object> | undefined =
+    !disableCache && WeakSet ? new WeakSet() : undefined
+
   return (storeAPI) => (next) => (action) => {
     const result = next(action)
 
@@ -185,7 +213,8 @@ export function createSerializableStateInvariantMiddleware(
           '',
           isSerializable,
           getEntries,
-          ignoredActionPaths
+          ignoredActionPaths,
+          cache
         )
 
         if (foundActionNonSerializableValue) {
@@ -212,7 +241,8 @@ export function createSerializableStateInvariantMiddleware(
           '',
           isSerializable,
           getEntries,
-          ignoredPaths
+          ignoredPaths,
+          cache
         )
 
         if (foundStateNonSerializableValue) {

packages/toolkit/src/tests/serializableStateInvariantMiddleware.test.ts

@@ -3,13 +3,15 @@ import {
   createConsole,
   getLog,
 } from 'console-testing-library/pure'
-import type { Reducer } from '@reduxjs/toolkit'
+import type { AnyAction, Reducer } from '@reduxjs/toolkit'
 import {
   configureStore,
   createSerializableStateInvariantMiddleware,
   findNonSerializableValue,
   isPlain,
 } from '@reduxjs/toolkit'
+import { isNestedFrozen } from '@internal/serializableStateInvariantMiddleware'
+import produce from 'immer'
 
 // Mocking console
 let restore = () => {}
@@ -572,4 +574,44 @@ describe('serializableStateInvariantMiddleware', () => {
     store.dispatch({ type: 'SOME_ACTION' })
     expect(getLog().log).toMatch('')
   })
+
+  it('Should cache its results', () => {
+    const reducer: Reducer<[], AnyAction> = (state = [], action) => {
+      if (action.type === 'SET_STATE') return action.payload
+      return state
+    }
+
+    let numPlainChecks = 0
+    const countPlainChecks = (x: any) => {
+      numPlainChecks++
+      return isPlain(x)
+    }
+
+    const serializableStateInvariantMiddleware =
+      createSerializableStateInvariantMiddleware({
+        isSerializable: countPlainChecks,
+      })
+
+    const store = configureStore({
+      reducer: {
+        testSlice: reducer,
+      },
+      middleware: [serializableStateInvariantMiddleware],
+    })
+
+    const state = produce([], () =>
+      new Array(50).fill(0).map((x, i) => ({ i }))
+    )
+    expect(isNestedFrozen(state)).toBe(true)
+
+    store.dispatch({
+      type: 'SET_STATE',
+      payload: state,
+    })
+    expect(numPlainChecks).toBeGreaterThan(state.length)
+
+    numPlainChecks = 0
+    store.dispatch({ type: 'NOOP' })
+    expect(numPlainChecks).toBeLessThan(10)
+  })
 })