Merge branch 'feature/upstream-v5.0.1' into feature/update-to-v5.0.1

FAQ.md

@@ -1,7 +1,7 @@
 # Frequently Asked Questions
 ----------------------------
 - [How to navigate with Redux action](#how-to-navigate-with-redux-action)
-- [How to get the current browser location (URL)](#how-to-get-current-browser-location-url)
+- [How to get the current browser location (URL)](#how-to-get-the-current-browser-location-url)
 - [How to set Router props e.g. basename, initialEntries, etc.](#how-to-set-router-props-eg-basename-initialentries-etc)
 - [How to hot reload functional components](#how-to-hot-reload-functional-components)
 - [How to hot reload reducers](#how-to-hot-reload-reducers)
@@ -184,40 +184,53 @@ if (module.hot) {
          ["es2015", { "modules": false }]
        ]
     */
-    store.replaceReducer(connectRouter(history)(rootReducer))
+    store.replaceReducer(rootReducer(history))
 
     /* For Webpack 1.x
     const nextRootReducer = require('./reducers').default
-    store.replaceReducer(connectRouter(history)(nextRootReducer))
+    store.replaceReducer(nextRootReducer(history))
     */
   })
 }
 ```
 
 ### How to support Immutable.js
-1) Use `combineReducers` from `redux-immutable` to create the root reducer.
+1) Create your root reducer as a function that takes `history` and returns reducer. Use `combineReducers` from `redux-immutable` to return the root reducer.
+
+2) Import `connectRouter` from `connected-react-router/immutable` and add router reducer to root reducer
 ```js
 import { combineReducers } from 'redux-immutable'
+import { connectRouter } from 'connected-react-router/immutable'
 ...
-const rootReducer = combineReducers({
+const rootReducer = (history) => combineReducers({
+  router: connectRouter(history),
   ...
 })
 ...
 ```
 
-2) Import `ConnectedRouter`, `routerMiddleware`, and `connectRouter` from `connected-react-router/immutable` instead of `connected-react-router`.
+2) Import `ConnectedRouter` and `routerMiddleware` from `connected-react-router/immutable` instead of `connected-react-router`.
+```js
+import { ConnectedRouter, routerMiddleware } from 'connected-react-router/immutable'
+```
+
+3) Create your root reducer with router reducer by passing `history` to `rootReducer` function
 ```js
-import { ConnectedRouter, routerMiddleware, connectRouter } from 'connected-react-router/immutable'
+const store = createStore(
+  rootReducer(history),
+  initialState,
+  ...
+)
 ```
 
-3) (Optional) Initialize state with `Immutable.Map()`
+4) (Optional) Initialize state with `Immutable.Map()`
 ```js
 import Immutable from 'immutable'
 ...
 const initialState = Immutable.Map()
 ...
 const store = createStore(
-  connectRouter(history)(rootReducer),
+  rootReducer(history),
   initialState,
   ...
 )

README.md

@@ -1,3 +1,5 @@
+> Breaking change in v5.0.0! Please see the [release note](https://github.com/supasate/connected-react-router/releases/tag/v5.0.0).
+
 Connected React Router [![Build Status](https://travis-ci.org/supasate/connected-react-router.svg?branch=master)](https://travis-ci.org/supasate/connected-react-router) [![Open Source Helpers](https://www.codetriage.com/supasate/connected-react-router/badges/users.svg)](https://www.codetriage.com/supasate/connected-react-router)
 ======================
 A Redux binding for React Router v4
@@ -36,20 +38,32 @@ Usage
 ### Step 1
 
 - Create a `history` object.
-- Wrap the root reducer with `connectRouter` and supply the `history` object to get a new root reducer.
+- 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`.
 - Use `routerMiddleware(history)` if you want to dispatch history actions (e.g. to change URL with `push('/path/to/somewhere')`).
 
 
 ```js
+// reducers.js
+import { combineReducers } from 'redux'
+import { connectRouter } from 'connected-react-router'
+
+export default (history) => combineReducers({
+  router: connectRouter(history),
+  ... // rest of your reducers
+})
+
+// configureStore.js
 ...
 import { createBrowserHistory } from 'history'
 import { applyMiddleware, compose, createStore } from 'redux'
-import { connectRouter, routerMiddleware } from 'connected-react-router'
+import { routerMiddleware } from 'connected-react-router'
+import createRootReducer from './reducers'
 ...
 const history = createBrowserHistory()
 
 const store = createStore(
-  connectRouter(history)(rootReducer), // new root reducer with router state
+  createRootReducer(history), // root reducer with router state
   initialState,
   compose(
     applyMiddleware(
@@ -96,7 +110,7 @@ See the [examples](https://github.com/supasate/connected-react-router/tree/maste
 [FAQ](https://github.com/supasate/connected-react-router/tree/master/FAQ.md)
 -----
 - [How to navigate with Redux action](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-navigate-with-redux-action)
-- [How to get the current browser location (URL)](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-get-current-browser-location-url)
+- [How to get the current browser location (URL)](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-get-the-current-browser-location-url)
 - [How to set Router props e.g. basename, initialEntries, etc.](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-set-router-props-eg-basename-initialentries-etc)
 - [How to hot reload functional components](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-hot-reload-functional-components)
 - [How to hot reload reducers](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-hot-reload-reducers)

examples/basic/.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": [
-    ["es2015", { "modules": false }],
-    "react",
-    "stage-1"
+    "@babel/preset-env",
+    "@babel/preset-react"
   ]
 }

examples/basic/package.json

@@ -5,32 +5,32 @@
   "main": "src/index.js",
   "scripts": {
     "dev": "node server.js",
-    "build": "webpack"
+    "build": "webpack --mode production"
   },
   "author": "Supasate Choochaisri",
   "license": "MIT",
   "devDependencies": {
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.20.0",
-    "babel-loader": "^6.2.9",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-0": "^6.16.0",
-    "express": "^4.14.0",
-    "react-hot-loader": "^3.0.0-beta",
-    "webpack": "^2.2.0",
-    "webpack-dev-middleware": "^1.9.0",
-    "webpack-hot-middleware": "^2.15.0"
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-cli": "^6.26.0",
+    "babel-loader": "^8.0.4",
+    "express": "^4.16.4",
+    "react-hot-loader": "^4.3.12",
+    "webpack": "^4.24.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-middleware": "^3.4.0",
+    "webpack-hot-middleware": "^2.24.3"
   },
   "dependencies": {
-    "connected-react-router": "^4.4.0",
-    "history": "^4.4.1",
-    "prop-types": "^15.5.8",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-redux": "^4.4.8",
-    "react-router": "^4.1.0",
-    "react-router-dom": "^4.1.0",
-    "redux": "^3.6.0"
+    "connected-react-router": "^5.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-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "redux": "^4.0.1"
   }
 }

examples/basic/src/index.js

@@ -12,7 +12,7 @@ const history = createBrowserHistory()
 
 const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 const store = createStore(
-  connectRouter(history)(rootReducer),
+  rootReducer(history),
   composeEnhancer(
     applyMiddleware(
       routerMiddleware(history),
@@ -42,6 +42,6 @@ if (module.hot) {
 
   // Reload reducers
   module.hot.accept('./reducers', () => {
-    store.replaceReducer(connectRouter(history)(rootReducer))
+    store.replaceReducer(rootReducer(history))
   })
 }

examples/basic/src/reducers/index.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux'
+import { connectRouter } from 'connected-react-router'
 import counterReducer from './counter'
 
-const rootReducer = combineReducers({
+const rootReducer = (history) => combineReducers({
   count: counterReducer,
+  router: connectRouter(history)
 })
 
 export default rootReducer

examples/basic/webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path')
 const webpack = require('webpack')
 
 module.exports = {
+  mode: 'development',
   devtool: 'eval-source-map',
   entry: [
     'react-hot-loader/patch',