Use React Hooks for connect

package.json

@@ -39,15 +39,15 @@
     "coverage": "codecov"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0",
-    "redux": "^2.0.0 || ^3.0.0 || ^4.0.0-0"
+    "react": "^16.7.0-alpha.0",
+    "redux": "^3.0.0 || ^4.0.0-0"
   },
   "dependencies": {
-    "hoist-non-react-statics": "^2.5.5",
+    "hoist-non-react-statics": "^3.0.1",
     "invariant": "^2.2.4",
     "loose-envify": "^1.1.0",
     "prop-types": "^15.6.1",
-    "react-lifecycles-compat": "^3.0.0"
+    "react-is": "^16.7.0-alpha.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
@@ -89,8 +89,8 @@
     "jest": "^23.4.1",
     "jest-dom": "^1.12.0",
     "npm-run": "^5.0.1",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
+    "react": "^16.7.0-alpha.0",
+    "react-dom": "^16.7.0-alpha.0",
     "react-testing-library": "^5.0.0",
     "redux": "^4.0.0",
     "rimraf": "^2.6.2",

rollup.config.js

@@ -25,7 +25,11 @@ const config = {
     replace({
       'process.env.NODE_ENV': JSON.stringify(env)
     }),
-    commonjs()
+    commonjs({
+      namedExports: {
+        'node_modules/react-is/index.js': ['isValidElementType'],
+      }
+    })
   ]
 }
 

src/components/Provider.js

@@ -1,57 +1,86 @@
-import { Component, Children } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { storeShape, subscriptionShape } from '../utils/PropTypes'
-import warning from '../utils/warning'
-
-let didWarnAboutReceivingStore = false
-function warnAboutReceivingStore() {
-  if (didWarnAboutReceivingStore) {
-    return
-  }
-  didWarnAboutReceivingStore = true
-
-  warning(
-    '<Provider> does not support changing `store` on the fly. ' +
-    'It is most likely that you see this error because you updated to ' +
-    'Redux 2.x and React Redux 2.x which no longer hot reload reducers ' +
-    'automatically. See https://github.com/reduxjs/react-redux/releases/' +
-    'tag/v2.0.0 for the migration instructions.'
-  )
-}
+import { storeShape } from '../utils/PropTypes'
+
+import {ReactReduxContext} from "./context"
 
-export function createProvider(storeKey = 'store') {
-    const subscriptionKey = `${storeKey}Subscription`
+export function createProvider() {
 
     class Provider extends Component {
-        getChildContext() {
-          return { [storeKey]: this[storeKey], [subscriptionKey]: null }
+
+        constructor(props) {
+          super(props)
+
+            const {store} = props
+
+            this.state = {
+                storeState : store.getState(),
+                store,
+            }
         }
 
-        constructor(props, context) {
-          super(props, context)
-          this[storeKey] = props.store;
+        componentDidMount() {
+          this._isMounted = true
+          this.subscribe()
         }
 
-        render() {
-          return Children.only(this.props.children)
+        componentWillUnmount() {
+          if(this.unsubscribe) this.unsubscribe()
+
+          this._isMounted = false
+        }
+
+        componentDidUpdate(prevProps) {
+          if(this.props.store !== prevProps.store) {
+            if(this.unsubscribe) this.unsubscribe()
+
+            this.subscribe()
+          }
         }
-    }
 
-    if (process.env.NODE_ENV !== 'production') {
-      Provider.prototype.componentWillReceiveProps = function (nextProps) {
-        if (this[storeKey] !== nextProps.store) {
-          warnAboutReceivingStore()
+        subscribe() {
+          const {store} = this.props
+
+          this.unsubscribe = store.subscribe( () => {
+            const newStoreState = store.getState()
+
+            if(!this._isMounted) {
+              return
+            }
+
+            this.setState(providerState => {
+              // If the value is the same, skip the unnecessary state update.
+              if(providerState.storeState === newStoreState) {
+                return null
+              }
+
+              return {storeState : newStoreState}
+            })
+          })
+
+          // Actions might have been dispatched between render and mount - handle those
+          const postMountStoreState = store.getState()
+          if(postMountStoreState !== this.state.storeState) {
+            this.setState({storeState : postMountStoreState})
+          }
+        }
+
+        render() {
+          const Context = this.props.context || ReactReduxContext
+
+            return (
+                <Context.Provider value={this.state}>
+                    {this.props.children}
+                </Context.Provider>
+            )
         }
-      }
     }
 
+
     Provider.propTypes = {
-        store: storeShape.isRequired,
-        children: PropTypes.element.isRequired,
-    }
-    Provider.childContextTypes = {
-        [storeKey]: storeShape.isRequired,
-        [subscriptionKey]: subscriptionShape,
+      store: storeShape.isRequired,
+      children: PropTypes.element.isRequired,
+      context : PropTypes.object,
     }
 
     return Provider