fix(firebaseConnect): remove dispatch from reserved props list - #700

* fix(firestoreConnect): add error for passing of reserved props "firebase" and "firestore" when using firestoreConnect

src/firebaseConnect.js

@@ -6,10 +6,6 @@ import { watchEvents, unWatchEvents } from './actions/query'
 import { getEventsFromInput, createCallable, wrapDisplayName } from './utils'
 import ReactReduxFirebaseContext from './ReactReduxFirebaseContext'
 
-// Reserved props that should not be passed into a firebaseConnect wrapped
-// component. Will throw an error if they are.
-const RESERVED_PROPS = ['firebase', 'dispatch']
-
 /**
  * Function that creates a Higher Order Component which
  * automatically listens/unListens to provided firebase paths using
@@ -102,23 +98,21 @@ export const createFirebaseConnect = (storeKey = 'store') => (
     // Check that reserved props are not supplied to a FirebaseConnected
     // component and if they are, throw an error so the developer can rectify
     // this issue.
-    const clashes = Object.keys(props).filter(k => RESERVED_PROPS.includes(k))
+    const clashes = Object.keys(props).includes('firebase')
 
     if (clashes.length > 0) {
       throw new Error(
-        `Supplied prop/s "${clashes.join(
-          '", "'
-        )}" are reserved for internal firebaseConnect() usage.`
+        `Supplied prop "firebase" is reserved for internal firebaseConnect() usage.`
       )
     }
 
     return (
       <ReactReduxFirebaseContext.Consumer>
         {_internalFirebase => (
           <HoistedComp
-            firebase={_internalFirebase}
-            dispatch={_internalFirebase.dispatch}
             {...props}
+            dispatch={_internalFirebase.dispatch}
+            firebase={_internalFirebase}
           />
         )}
       </ReactReduxFirebaseContext.Consumer>

src/firestoreConnect.js

@@ -6,6 +6,10 @@ import { createCallable, wrapDisplayName } from './utils'
 import ReduxFirestoreContext from './ReduxFirestoreContext'
 import ReactReduxFirebaseContext from './ReactReduxFirebaseContext'
 
+// Reserved props that should not be passed into a firebaseConnect wrapped
+// component. Will throw an error if they are.
+const RESERVED_PROPS = ['firebase', 'firestore']
+
 /**
  * Function that creates a Higher Order Component which
  * automatically listens/unListens to provided firebase paths using
@@ -94,22 +98,38 @@ export const createFirestoreConnect = (storeKey = 'store') => (
 
   const HoistedComp = hoistStatics(FirestoreConnectWrapped, WrappedComponent)
 
-  const FirestoreConnect = props => (
-    <ReactReduxFirebaseContext.Consumer>
-      {firebase => (
-        <ReduxFirestoreContext.Consumer>
-          {firestore => (
-            <HoistedComp
-              firestore={firestore}
-              firebase={firebase}
-              dispatch={firebase.dispatch}
-              {...props}
-            />
-          )}
-        </ReduxFirestoreContext.Consumer>
-      )}
-    </ReactReduxFirebaseContext.Consumer>
-  )
+  const FirestoreConnect = props => {
+    // Check that reserved props are not supplied to a FirebaseConnected
+    // component and if they are, throw an error so the developer can rectify
+    // this issue.
+    const clashes = Object.keys(props).filter(k => RESERVED_PROPS.includes(k))
+
+    if (clashes.length > 0) {
+      const moreThanOne = clashes.length > 1
+      throw new Error(
+        `Supplied prop${moreThanOne ? 's' : ''} "${clashes.join('", "')}" ${
+          moreThanOne ? 'are' : 'is'
+        } reserved for internal firestoreConnect() usage.`
+      )
+    }
+
+    return (
+      <ReactReduxFirebaseContext.Consumer>
+        {firebase => (
+          <ReduxFirestoreContext.Consumer>
+            {firestore => (
+              <HoistedComp
+                {...props}
+                dispatch={firebase.dispatch}
+                firestore={firestore}
+                firebase={firebase}
+              />
+            )}
+          </ReduxFirestoreContext.Consumer>
+        )}
+      </ReactReduxFirebaseContext.Consumer>
+    )
+  }
 
   FirestoreConnect.displayName = wrapDisplayName(
     WrappedComponent,