Only warn for unexpected key once per key (#1818)

Create key cache in combineReducers

Only define unexpectedKeyCache in dev environment

Author: aweary

src/combineReducers.js

@@ -12,7 +12,7 @@ function getUndefinedStateErrorMessage(key, action) {
   )
 }
 
-function getUnexpectedStateShapeWarningMessage(inputState, reducers, action) {
+function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
   var reducerKeys = Object.keys(reducers)
   var argumentName = action && action.type === ActionTypes.INIT ?
     'preloadedState argument passed to createStore' :
@@ -34,7 +34,14 @@ function getUnexpectedStateShapeWarningMessage(inputState, reducers, action) {
     )
   }
 
-  var unexpectedKeys = Object.keys(inputState).filter(key => !reducers.hasOwnProperty(key))
+  var unexpectedKeys = Object.keys(inputState).filter(key =>
+    !reducers.hasOwnProperty(key) &&
+    !unexpectedKeyCache[key]
+  )
+
+  unexpectedKeys.forEach(key => {
+    unexpectedKeyCache[key] = true
+  })
 
   if (unexpectedKeys.length > 0) {
     return (
@@ -101,6 +108,10 @@ export default function combineReducers(reducers) {
   }
   var finalReducerKeys = Object.keys(finalReducers)
 
+  if (process.env.NODE_ENV !== 'production') {
+    var unexpectedKeyCache = {}
+  }
+
   var sanityError
   try {
     assertReducerSanity(finalReducers)
@@ -114,7 +125,7 @@ export default function combineReducers(reducers) {
     }
 
     if (process.env.NODE_ENV !== 'production') {
-      var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action)
+      var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache)
       if (warningMessage) {
         warning(warningMessage)
       }

test/combineReducers.spec.js

@@ -210,24 +210,24 @@ describe('Utils', () => {
         /Unexpected key "bar".*createStore.*instead: "foo", "baz"/
       )
 
-      createStore(reducer, { bar: 2, qux: 4 })
+      createStore(reducer, { bar: 2, qux: 4, thud: 5 })
       expect(spy.calls[1].arguments[0]).toMatch(
-        /Unexpected keys "bar", "qux".*createStore.*instead: "foo", "baz"/
+        /Unexpected keys "qux", "thud".*createStore.*instead: "foo", "baz"/
       )
 
       createStore(reducer, 1)
       expect(spy.calls[2].arguments[0]).toMatch(
         /createStore has unexpected type of "Number".*keys: "foo", "baz"/
       )
 
-      reducer({ bar: 2 })
+      reducer({ corge: 2 })
       expect(spy.calls[3].arguments[0]).toMatch(
-        /Unexpected key "bar".*reducer.*instead: "foo", "baz"/
+        /Unexpected key "corge".*reducer.*instead: "foo", "baz"/
       )
 
-      reducer({ bar: 2, qux: 4 })
+      reducer({ fred: 2, grault: 4 })
       expect(spy.calls[4].arguments[0]).toMatch(
-        /Unexpected keys "bar", "qux".*reducer.*instead: "foo", "baz"/
+        /Unexpected keys "fred", "grault".*reducer.*instead: "foo", "baz"/
       )
 
       reducer(1)
@@ -237,5 +237,26 @@ describe('Utils', () => {
 
       spy.restore()
     })
+
+    it('only warns for unexpected keys once', () => {
+      const spy = expect.spyOn(console, 'error')
+      const foo = (state = { foo: 1 }) => state
+      const bar = (state = { bar: 2 }) => state
+
+      expect(spy.calls.length).toBe(0)
+      const reducer = combineReducers({ foo, bar })
+      const state = { foo: 1, bar: 2, qux: 3 }
+      reducer(state, {})
+      reducer(state, {})
+      reducer(state, {})
+      reducer(state, {})
+      expect(spy.calls.length).toBe(1)
+      reducer({ ...state, baz: 5 }, {})
+      reducer({ ...state, baz: 5 }, {})
+      reducer({ ...state, baz: 5 }, {})
+      reducer({ ...state, baz: 5 }, {})
+      expect(spy.calls.length).toBe(2)
+      spy.restore()
+    })
   })
 })