Merge pull request #191 from supasate/support-react-redux-v6

Support React Router v6
supasate · Dec 9, 2018 · 66215b1 · 66215b1
2 parents a1db646 + eb8b612
commit 66215b1
Show file tree

Hide file tree

Showing 12 changed files with 504 additions and 561 deletions.
diff --git a/FAQ.md b/FAQ.md
@@ -7,6 +7,7 @@
 - [How to hot reload reducers](#how-to-hot-reload-reducers)
 - [How to support Immutable.js](#how-to-support-immutablejs)
 - [How to migrate from v4 to v5](#how-to-migrate-from-v4-to-v5)
+- [How to use your own context with react-redux](#how-to-use-your-own-context-with-react-redux)
 
 ### How to navigate with Redux action
 #### with store.dispatch
@@ -307,3 +308,17 @@ It's easy to migrate from v4 to v5.
 + const nextCreateRootReducer = require('./reducers').default
 + store.replaceReducer(nextCreateRootReducer(history))
 ```
+
+### How to Use Your Own Context with react-redux
+With react-redux v6.0.0, you can pass your own context to `<Provider>` component. So, you need to pass the same context as props to `<ConnectedRouter>` component.
+```js
+const customContext = React.createContext(null) // your own context
+
+ReactDOM.render(
+  <Provider store={store} context={customContext}>
+    <ConnectedRouter history={history} context={customContext}>
+      ...
+    </ConnectedRouter>
+  </Provider>
+)
+```
diff --git a/README.md b/README.md
@@ -25,6 +25,8 @@ Main features
 
 Installation
 -----------
+Connected React Router requires **React 16.4 and Redux 6.0 or later**.
+
 Using [npm](https://www.npmjs.com/):
 
     $ npm install --save connected-react-router
@@ -39,7 +41,7 @@ Usage
 
 - Create a `history` object.
 - Create root reducer as a function that takes `history` as an argument and returns reducer.
-- Add `router` reducer into root reducer by passing `history` to `connectRouter`. Note: The key MUST be `router`.
+- Add `router` reducer into root reducer by passing `history` to `connectRouter`. Note: The key **MUST** be `router`.
 - Use `routerMiddleware(history)` if you want to dispatch history actions (e.g. to change URL with `push('/path/to/somewhere')`).
 
 

diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -23,12 +23,12 @@
     "webpack-hot-middleware": "^2.24.3"
   },
   "dependencies": {
-    "connected-react-router": "^5.0.0",
+    "connected-react-router": "^6.0.0",
     "history": "^4.7.2",
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-redux": "^5.1.0",
+    "react-redux": "^6.0.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.1"

diff --git a/examples/basic/yarn.lock b/examples/basic/yarn.lock
@@ -1529,10 +1529,10 @@ concat-stream@^1.5.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-connected-react-router@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-5.0.0.tgz#46f19063c629a0e8c44cedaf7cac0c8fedadb613"
-  integrity sha512-E8/WIx0VIxivsQsrlVr/eOwKW22pTBBclDtTQvoc2zEI+0dj3NnX7U/JffWedO+7N6QKERMJIPhbnGbpLSfhag==
+connected-react-router@^6.0.0-beta.1:
+  version "6.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.0.0-beta.1.tgz#5261a7ced179a0fbc6a8a017a03f2d8c39b9b4a6"
+  integrity sha512-03qUWxerRbR5rqytSDCNNVhKw4eZ4UFMWhpKPLQXuW7Ud9zT75sDq2Do1O788JpI445oCfHWoIV5mppXm2LytQ==
   dependencies:
     immutable "^3.8.1"
     seamless-immutable "^7.1.3"
@@ -2397,7 +2397,7 @@ hoist-non-react-statics@^2.5.0:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.0.0:
+hoist-non-react-statics@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz#42414ccdfff019cd2168168be998c7b3bd5245c0"
   integrity sha512-MYcYuROh7SBM69xHGqXEwQqDux34s9tz+sCnxJmN18kgWh6JFdTw/5YdZtqsOdZJXddE/wUpCzfEdDrJj8p0Iw==
@@ -3756,23 +3756,22 @@ react-is@^16.3.2, react-is@^16.6.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.0.tgz#456645144581a6e99f6816ae2bd24ee94bdd0c01"
   integrity sha512-q8U7k0Fi7oxF1HvQgyBjPwDXeMplEsArnKt2iYhuIF86+GBbgLHdAmokL3XUFjTd7Q363OSNG55FOGUdONVn1g==
 
-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-redux@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.0.tgz#948b1e2686473d1999092bcfb32d0dc43d33f667"
-  integrity sha512-CRMpEx8+ccpoVxQrQDkG1obExNYpj6dZ1Ni7lUNFB9wcxOhy02tIqpFo4IUXc0kYvCGMu6ABj9A4imEX2VGZJQ==
+react-redux@~6.0.0-beta.2:
+  version "6.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0-beta.2.tgz#90b8d50ae71d9dc5d413200836d279de64f7c3e2"
+  integrity sha512-B4CADCEReHgnJzRLGp4sadIhOpRZymxEW9LZ0vcoK02DeyRnQwYY3MI1IvZ6nNhphYMfDD311dpy571lI5HbHQ==
   dependencies:
     "@babel/runtime" "^7.1.2"
-    hoist-non-react-statics "^3.0.0"
+    hoist-non-react-statics "^3.0.1"
     invariant "^2.2.4"
     loose-envify "^1.1.0"
-    prop-types "^15.6.1"
+    prop-types "^15.6.2"
     react-is "^16.6.0"
-    react-lifecycles-compat "^3.0.0"
 
 react-router-dom@^4.3.1:
   version "4.3.1"

diff --git a/examples/immutable/package.json b/examples/immutable/package.json
@@ -22,13 +22,13 @@
     "webpack-hot-middleware": "^2.24.3"
   },
   "dependencies": {
-    "connected-react-router": "^5.0.0",
+    "connected-react-router": "^6.0.0",
     "history": "^4.7.2",
     "immutable": "^4.0.0-rc.12",
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-redux": "^5.1.0",
+    "react-redux": "^6.0.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.1",

diff --git a/examples/immutable/yarn.lock b/examples/immutable/yarn.lock
@@ -1297,10 +1297,10 @@ concat-stream@^1.5.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-connected-react-router@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-5.0.0.tgz#46f19063c629a0e8c44cedaf7cac0c8fedadb613"
-  integrity sha512-E8/WIx0VIxivsQsrlVr/eOwKW22pTBBclDtTQvoc2zEI+0dj3NnX7U/JffWedO+7N6QKERMJIPhbnGbpLSfhag==
+connected-react-router@^6.0.0-beta.1:
+  version "6.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.0.0-beta.1.tgz#5261a7ced179a0fbc6a8a017a03f2d8c39b9b4a6"
+  integrity sha512-03qUWxerRbR5rqytSDCNNVhKw4eZ4UFMWhpKPLQXuW7Ud9zT75sDq2Do1O788JpI445oCfHWoIV5mppXm2LytQ==
   dependencies:
     immutable "^3.8.1"
     seamless-immutable "^7.1.3"
@@ -2053,7 +2053,7 @@ hoist-non-react-statics@^2.5.0:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.0.0:
+hoist-non-react-statics@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz#42414ccdfff019cd2168168be998c7b3bd5245c0"
   integrity sha512-MYcYuROh7SBM69xHGqXEwQqDux34s9tz+sCnxJmN18kgWh6JFdTw/5YdZtqsOdZJXddE/wUpCzfEdDrJj8p0Iw==
@@ -3246,23 +3246,22 @@ react-is@^16.3.2, react-is@^16.6.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.0.tgz#456645144581a6e99f6816ae2bd24ee94bdd0c01"
   integrity sha512-q8U7k0Fi7oxF1HvQgyBjPwDXeMplEsArnKt2iYhuIF86+GBbgLHdAmokL3XUFjTd7Q363OSNG55FOGUdONVn1g==
 
-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-redux@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.0.tgz#948b1e2686473d1999092bcfb32d0dc43d33f667"
-  integrity sha512-CRMpEx8+ccpoVxQrQDkG1obExNYpj6dZ1Ni7lUNFB9wcxOhy02tIqpFo4IUXc0kYvCGMu6ABj9A4imEX2VGZJQ==
+react-redux@~6.0.0-beta.2:
+  version "6.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0-beta.2.tgz#90b8d50ae71d9dc5d413200836d279de64f7c3e2"
+  integrity sha512-B4CADCEReHgnJzRLGp4sadIhOpRZymxEW9LZ0vcoK02DeyRnQwYY3MI1IvZ6nNhphYMfDD311dpy571lI5HbHQ==
   dependencies:
     "@babel/runtime" "^7.1.2"
-    hoist-non-react-statics "^3.0.0"
+    hoist-non-react-statics "^3.0.1"
     invariant "^2.2.4"
     loose-envify "^1.1.0"
-    prop-types "^15.6.1"
+    prop-types "^15.6.2"
     react-is "^16.6.0"
-    react-lifecycles-compat "^3.0.0"
 
 react-router-dom@^4.3.1:
   version "4.3.1"

diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -26,11 +26,11 @@
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
-    "connected-react-router": "^5.0.0",
+    "connected-react-router": "^6.0.0",
     "history": "^4.7.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-redux": "^5.1.0",
+    "react-redux": "^6.0.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.1"

diff --git a/examples/typescript/yarn.lock b/examples/typescript/yarn.lock
@@ -787,10 +787,10 @@ connect-history-api-fallback@^1.3.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
   integrity sha1-sGhzk0vF40T+9hGhlqb6rgruAVo=
 
-connected-react-router@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-5.0.0.tgz#46f19063c629a0e8c44cedaf7cac0c8fedadb613"
-  integrity sha512-E8/WIx0VIxivsQsrlVr/eOwKW22pTBBclDtTQvoc2zEI+0dj3NnX7U/JffWedO+7N6QKERMJIPhbnGbpLSfhag==
+connected-react-router@^6.0.0-beta.1:
+  version "6.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.0.0-beta.1.tgz#5261a7ced179a0fbc6a8a017a03f2d8c39b9b4a6"
+  integrity sha512-03qUWxerRbR5rqytSDCNNVhKw4eZ4UFMWhpKPLQXuW7Ud9zT75sDq2Do1O788JpI445oCfHWoIV5mppXm2LytQ==
   dependencies:
     immutable "^3.8.1"
     seamless-immutable "^7.1.3"
@@ -1612,7 +1612,7 @@ hoist-non-react-statics@^2.5.0:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.0.0:
+hoist-non-react-statics@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz#42414ccdfff019cd2168168be998c7b3bd5245c0"
   integrity sha512-MYcYuROh7SBM69xHGqXEwQqDux34s9tz+sCnxJmN18kgWh6JFdTw/5YdZtqsOdZJXddE/wUpCzfEdDrJj8p0Iw==
@@ -2950,23 +2950,22 @@ react-is@^16.3.2, react-is@^16.6.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.0.tgz#456645144581a6e99f6816ae2bd24ee94bdd0c01"
   integrity sha512-q8U7k0Fi7oxF1HvQgyBjPwDXeMplEsArnKt2iYhuIF86+GBbgLHdAmokL3XUFjTd7Q363OSNG55FOGUdONVn1g==
 
-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-redux@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.0.tgz#948b1e2686473d1999092bcfb32d0dc43d33f667"
-  integrity sha512-CRMpEx8+ccpoVxQrQDkG1obExNYpj6dZ1Ni7lUNFB9wcxOhy02tIqpFo4IUXc0kYvCGMu6ABj9A4imEX2VGZJQ==
+react-redux@~6.0.0-beta.2:
+  version "6.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0-beta.2.tgz#90b8d50ae71d9dc5d413200836d279de64f7c3e2"
+  integrity sha512-B4CADCEReHgnJzRLGp4sadIhOpRZymxEW9LZ0vcoK02DeyRnQwYY3MI1IvZ6nNhphYMfDD311dpy571lI5HbHQ==
   dependencies:
     "@babel/runtime" "^7.1.2"
-    hoist-non-react-statics "^3.0.0"
+    hoist-non-react-statics "^3.0.1"
     invariant "^2.2.4"
     loose-envify "^1.1.0"
-    prop-types "^15.6.1"
+    prop-types "^15.6.2"
     react-is "^16.6.0"
-    react-lifecycles-compat "^3.0.0"
 
 react-router-dom@^4.3.1:
   version "4.3.1"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "connected-react-router",
-  "version": "5.0.1",
+  "version": "6.0.0",
   "description": "A Redux binding for React Router v4",
   "main": "lib/index.js",
   "types": "./index.d.ts",
@@ -29,8 +29,8 @@
   },
   "peerDependencies": {
     "history": "^4.7.2",
-    "react": "^15.5.4 || ^16.0.0",
-    "react-redux": "^4.4.8 || ^5.0.7",
+    "react": "^16.4.0",
+    "react-redux": "^6.0.0",
     "react-router": "^4.3.1",
     "redux": "^3.6.0 || ^4.0.0"
   },
@@ -56,9 +56,9 @@
     "jest": "^23.6.0",
     "prop-types": "^15.5.8",
     "raf": "^3.4.0",
-    "react": "^16.0.0",
+    "react": "^16.4.0",
     "react-dom": "^16.0.0",
-    "react-redux": "^5.0.7",
+    "react-redux": "^6.0.0",
     "react-router": "^4.3.1",
     "react-test-renderer": "^16.0.0",
     "redux": "^4.0.0",

diff --git a/src/ConnectedRouter.js b/src/ConnectedRouter.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
+import { connect, ReactReduxContext } from 'react-redux'
 import { Router } from 'react-router'
 import { onLocationChanged } from './actions'
 import createSelectors from './selectors'
@@ -16,19 +16,19 @@ const createConnectedRouter = (structure) => {
    */
 
   class ConnectedRouter extends Component {
-    constructor(props, context) {
+    constructor(props) {
       super(props)
 
       this.inTimeTravelling = false
 
       // Subscribe to store changes
-      this.unsubscribe = context.store.subscribe(() => {
+      this.unsubscribe = props.store.subscribe(() => {
         // Extract store's location
         const {
           pathname: pathnameInStore,
           search: searchInStore,
           hash: hashInStore,
-        } = getLocation(context.store.getState())
+        } = getLocation(props.store.getState())
         // Extract history's location
         const {
           pathname: pathnameInHistory,
@@ -79,14 +79,11 @@ const createConnectedRouter = (structure) => {
     }
   }
 
-  ConnectedRouter.contextTypes = {
+  ConnectedRouter.propTypes = {
     store: PropTypes.shape({
       getState: PropTypes.func.isRequired,
       subscribe: PropTypes.func.isRequired,
     }).isRequired,
-  }
-
-  ConnectedRouter.propTypes = {
     history: PropTypes.shape({
       action: PropTypes.string.isRequired,
       listen: PropTypes.func.isRequired,
@@ -112,7 +109,25 @@ const createConnectedRouter = (structure) => {
     onLocationChanged: (location, action) => dispatch(onLocationChanged(location, action))
   })
 
-  return connect(mapStateToProps, mapDispatchToProps)(ConnectedRouter)
+  const ConnectedRouterWithContext = props => {
+    const Context = props.context || ReactReduxContext
+
+    if (Context == null) {
+      throw 'Please upgrade to react-redux v6'
+    }
+
+    return (
+      <Context.Consumer>
+        {({ store }) => <ConnectedRouter store={store} {...props} />}
+      </Context.Consumer>
+    )
+  }
+
+  ConnectedRouterWithContext.propTypes = {
+    context: PropTypes.object,
+  }
+
+  return connect(mapStateToProps, mapDispatchToProps)(ConnectedRouterWithContext)
 }
 
 export default createConnectedRouter