Re-enable storeKey

Fixes reduxjs#1393

Author: aaronjensen

src/components/connectAdvanced.js

@@ -80,7 +80,6 @@ export default function connectAdvanced(
     // determines whether this HOC subscribes to store changes
     shouldHandleStateChanges = true,
 
-    // REMOVED: the key of props/context to get the store
     storeKey = 'store',
 
     // REMOVED: expose the wrapped component via refs
@@ -106,18 +105,6 @@ export default function connectAdvanced(
     'withRef is removed. To access the wrapped instance, use a ref on the connected component'
   )
 
-  const customStoreWarningMessage =
-    'To use a custom Redux store for specific components, create a custom React context with ' +
-    "React.createContext(), and pass the context object to React Redux's Provider and specific components" +
-    ' like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. ' +
-    'You may also pass a {context : MyContext} option to connect'
-
-  invariant(
-    storeKey === 'store',
-    'storeKey has been removed and does not do anything. ' +
-      customStoreWarningMessage
-  )
-
   const Context = context
 
   return function wrapWithConnect(WrappedComponent) {
@@ -182,7 +169,7 @@ export default function connectAdvanced(
       const contextValue = useContext(ContextToUse)
 
       // The store _must_ exist as either a prop or in context
-      const didStoreComeFromProps = Boolean(props.store)
+      const didStoreComeFromProps = Boolean(props[storeKey])
       const didStoreComeFromContext =
         Boolean(contextValue) && Boolean(contextValue.store)
 
@@ -194,7 +181,7 @@ export default function connectAdvanced(
           `React context consumer to ${displayName} in connect options.`
       )
 
-      const store = props.store || contextValue.store
+      const store = props[storeKey] || contextValue.store
 
       const childPropsSelector = useMemo(() => {
         // The child props selector needs the store reference as an input.

test/components/connect.spec.js

@@ -99,6 +99,43 @@ describe('React', () => {
         expect(tester.getByTestId('hi')).toHaveTextContent('there')
       })
 
+      it('should receive the store state in the store prop', () => {
+        const store = createStore(() => ({ hi: 'there' }))
+
+        @connect(state => state)
+        class Container extends Component {
+          render() {
+            return <Passthrough {...this.props} />
+          }
+        }
+
+        const tester = rtl.render(<Container pass="through" store={store} />)
+
+        expect(tester.getByTestId('hi')).toHaveTextContent('there')
+      })
+
+      it('should allow overriding the store prop with storeKey', () => {
+        const store = createStore(() => ({ hi: 'there' }))
+
+        @connect(
+          state => state,
+          undefined,
+          undefined,
+          { storeKey: 'reduxStore' }
+        )
+        class Container extends Component {
+          render() {
+            return <Passthrough {...this.props} />
+          }
+        }
+
+        const tester = rtl.render(
+          <Container pass="through" reduxStore={store} />
+        )
+
+        expect(tester.getByTestId('hi')).toHaveTextContent('there')
+      })
+
       it('should pass state and props to the given component', () => {
         const store = createStore(() => ({
           foo: 'bar',
@@ -2872,25 +2909,6 @@ describe('React', () => {
         ).toThrow(/withRef is removed/)
       })
 
-      it('should error on receiving a custom store key', () => {
-        const connectOptions = { storeKey: 'customStoreKey' }
-
-        expect(() => {
-          @connect(
-            undefined,
-            undefined,
-            undefined,
-            connectOptions
-          )
-          class Container extends Component {
-            render() {
-              return <Passthrough {...this.props} />
-            }
-          }
-          new Container()
-        }).toThrow(/storeKey has been removed/)
-      })
-
       it.skip('should error on custom store', () => {
         function Comp() {
           return <div>hi</div>