diff --git a/FAQ.md b/FAQ.md index 9e6243d3..eb76a9ab 100644 --- a/FAQ.md +++ b/FAQ.md @@ -6,6 +6,7 @@ - [How to hot reload functional components](#how-to-hot-reload-functional-components) - [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 navigate with Redux action #### with store.dispatch @@ -235,3 +236,58 @@ const store = createStore( ... ) ``` + +### How to migrate from v4 to v5 +It's easy to migrate from v4 to v5. +1. In your root reducer file, instead of exporting a root reducer, you need to export a function accepting a `history` object and returning a root reducer with `router` key. The value of the `router` key is `connectedRouter(history)`. + +```diff + // reducers.js + + import { combineReducers } from 'redux' ++ import { connectRouter } from 'connected-react-router' + +- export default combineReducers({ ++ export default (history) => combineReducers({ ++ router: connectRouter(history), + ... + }) +``` + +2. In `createStore` function, change to use the new function creating a root reducer. +```diff + // 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 rootReducer from './reducers' ++ import createRootReducer from './reducers' + + const history = createBrowserHistory() + + const store = createStore( +- connectRouter(history)(rootReducer), ++ createRootReducer(history), + initialState, + compose( + applyMiddleware( + routerMiddleware(history), + ), + ), + ) +``` + +3. For reducers hot reloading, similarly, change to use the new function creating a root reducer. +```diff + // For Webpack 2.x +- store.replaceReducer(connectRouter(history)(rootReducer)) ++ store.replaceReducer(createRootReducer(history)) + + // For Webpack 1.x +- const nextRootReducer = require('./reducers').default +- store.replaceReducer(connectRouter(history)(nextRootReducer)) ++ const nextCreateRootReducer = require('./reducers').default ++ store.replaceReducer(nextCreateRootReducer(history)) +``` diff --git a/README.md b/README.md index eae21c47..8e6e5aee 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -> Breaking change in v5.0.0! Please see the [release note](https://github.com/supasate/connected-react-router/releases/tag/v5.0.0). +> Breaking change in v5.0.0! Please read [How to migrate from v4 to v5](https://github.com/supasate/connected-react-router/blob/master/FAQ.md#how-to-migrate-from-v4-to-v5). 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) ====================== @@ -116,6 +116,7 @@ See the [examples](https://github.com/supasate/connected-react-router/tree/maste - [How to hot reload reducers](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-hot-reload-reducers) - [How to support Immutable.js](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-support-immutablejs) - [How to implement server-side rendering](https://medium.com/@cereallarceny/server-side-rendering-in-create-react-app-with-all-the-goodies-without-ejecting-4c889d7db25e) ([sample codebase](https://github.com/cereallarceny/cra-ssr)) +- [How to migrate from v4 to v5](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-migrate-from-v4-to-v5) Build -----