Add serializable state invariant middleware

Author: markerikson

src/serializableStateInvariantMiddleware.js

@@ -0,0 +1,90 @@
+import isPlainObject from './isPlainObject'
+
+function isPlain(val) {
+  return (
+    typeof val === 'undefined' ||
+    typeof val === 'string' ||
+    typeof val === 'boolean' ||
+    typeof val === 'number' ||
+    Array.isArray(val) ||
+    isPlainObject(val)
+  )
+}
+
+const NON_SERIALIZABLE_STATE_MESSAGE = [
+  'A non-serializable value was detected in the state, in the path: `%s`. Value: %o',
+  'Take a look at the reducer(s) handling this action type: %s.',
+  '(See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)'
+].join('\n')
+
+const NON_SERIALIZABLE_ACTION_MESSAGE = [
+  'A non-serializable value was detected in an action, in the path: `%s`. Value: %o',
+  'Take a look at the logic that dispatched this action:  %o.',
+  '(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)'
+].join('\n')
+
+export function findNonSerializableValue(
+  obj,
+  path = [],
+  isSerializable = isPlain
+) {
+  let foundNestedSerializable
+
+  if (!isSerializable(obj)) {
+    return { keyPath: path.join('.') || '<root>', value: obj }
+  }
+
+  for (let property in obj) {
+    if (obj.hasOwnProperty(property)) {
+      const nestedPath = path.concat(property)
+      const nestedValue = obj[property]
+
+      if (!isSerializable(nestedValue)) {
+        return { keyPath: nestedPath.join('.'), value: nestedValue }
+      }
+
+      if (typeof nestedValue === 'object') {
+        foundNestedSerializable = findNonSerializableValue(
+          nestedValue,
+          nestedPath
+        )
+
+        if (foundNestedSerializable) {
+          return foundNestedSerializable
+        }
+      }
+    }
+  }
+
+  return false
+}
+
+export default function createSerializableStateInvariantMiddleware(
+  options = {}
+) {
+  const { isSerializable = isPlain, ignore } = options
+
+  return storeAPI => next => action => {
+    const foundActionNonSerializableValue = findNonSerializableValue(action)
+
+    if (foundActionNonSerializableValue) {
+      const { keyPath, value } = foundActionNonSerializableValue
+
+      console.error(NON_SERIALIZABLE_ACTION_MESSAGE, keyPath, value, action)
+    }
+
+    const result = next(action)
+
+    const state = storeAPI.getState()
+
+    const foundStateNonSerializableValue = findNonSerializableValue(state)
+
+    if (foundStateNonSerializableValue) {
+      const { keyPath, value } = foundStateNonSerializableValue
+
+      console.error(NON_SERIALIZABLE_STATE_MESSAGE, keyPath, value, action.type)
+    }
+
+    return result
+  }
+}

src/serializableStateInvariantMiddleware.test.js

@@ -0,0 +1,134 @@
+import { configureStore } from './configureStore'
+
+import createSerializableStateInvariantMiddleware, {
+  findNonSerializableValue
+} from './serializableStateInvariantMiddleware'
+
+describe('findNonSerializableValue', () => {
+  it('Should return false if no matching values are found', () => {
+    const obj = {
+      a: 42,
+      b: {
+        b1: 'test'
+      },
+      c: [99, { d: 123 }]
+    }
+
+    const result = findNonSerializableValue(obj)
+
+    expect(result).toBe(false)
+  })
+
+  it('Should return a keypath and the value if it finds a non-serializable value', () => {
+    function testFunction() {}
+
+    const obj = {
+      a: 42,
+      b: {
+        b1: testFunction
+      },
+      c: [99, { d: 123 }]
+    }
+
+    const result = findNonSerializableValue(obj)
+
+    expect(result).toEqual({ keyPath: 'b.b1', value: testFunction })
+  })
+
+  it('Should return the first non-serializable value it finds', () => {
+    const map = new Map()
+    const symbol = Symbol.for('testSymbol')
+    function testFunction() {}
+
+    const obj = {
+      a: 42,
+      b: {
+        b1: 1
+      },
+      c: [99, { d: 123 }, map, symbol, 'test'],
+      d: symbol
+    }
+
+    const result = findNonSerializableValue(obj)
+
+    expect(result).toEqual({ keyPath: 'c.2', value: map })
+  })
+
+  it('Should return a specific value if the root object is non-serializable', () => {
+    const value = new Map()
+    const result = findNonSerializableValue(value)
+
+    expect(result).toEqual({ keyPath: '<root>', value })
+  })
+})
+
+describe('serializableStateInvariantMiddleware', () => {
+  beforeEach(() => {
+    console.error = jest.fn()
+  })
+
+  it('Should log an error when a non-serializable action is dispatched', () => {
+    const reducer = (state = 0, action) => state + 1
+
+    const serializableStateInvariantMiddleware = createSerializableStateInvariantMiddleware()
+
+    const store = configureStore({
+      reducer,
+      middleware: [serializableStateInvariantMiddleware]
+    })
+
+    const type = Symbol.for('SOME_CONSTANT')
+    const dispatchedAction = { type }
+
+    store.dispatch(dispatchedAction)
+
+    expect(console.error).toHaveBeenCalled()
+
+    const [message, keyPath, value, action] = console.error.mock.calls[0]
+    expect(message).toContain('detected in an action, in the path: `%s`')
+    expect(keyPath).toBe('type')
+    expect(value).toBe(type)
+    expect(action).toBe(dispatchedAction)
+  })
+
+  it('Should log an error when a non-serializable value is in state', () => {
+    const ACTION_TYPE = 'TEST_ACTION'
+
+    const initialState = {
+      a: 0
+    }
+
+    const badValue = new Map()
+
+    const reducer = (state = initialState, action) => {
+      switch (action.type) {
+        case ACTION_TYPE: {
+          return {
+            a: badValue
+          }
+        }
+        default:
+          return state
+      }
+    }
+
+    const serializableStateInvariantMiddleware = createSerializableStateInvariantMiddleware()
+
+    const store = configureStore({
+      reducer: {
+        testSlice: reducer
+      },
+      middleware: [serializableStateInvariantMiddleware]
+    })
+
+    store.dispatch({ type: ACTION_TYPE })
+
+    expect(console.error).toHaveBeenCalled()
+
+    const [message, keyPath, value, actionType] = console.error.mock.calls[0]
+    expect(message).toContain('detected in the state, in the path: `%s`')
+    expect(keyPath).toBe('testSlice.a')
+    expect(value).toBe(badValue)
+    expect(actionType).toBe(ACTION_TYPE)
+  })
+})