Merge pull request #1051 from alexstotsky/migrate-to-redux-first-history

(internal) Migration from connected-react-router to redux-first-history

Author: jeojoe

package-lock.json

@@ -26,7 +26,6 @@
     "axios": "^1.8.4",
     "bignumber.js": "^9.3.1",
     "classnames": "2.5.1",
-    "connected-react-router": "6.9.3",
     "flexboxgrid2": "7.2.1",
     "history": "^4.9.0",
     "i18next": "15.0.7",
@@ -41,15 +40,16 @@
     "normalize.css": "8.0.1",
     "prop-types": "^15.7.2",
     "query-string": "^9.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "10.5.2",
     "react-redux": "7.2.8",
     "react-router-dom": "^5.0.0",
     "react-swipeable": "^5.5.1",
     "react-transition-group": "^2.6.1",
     "recharts": "2.1.13",
     "redux": "4.2.0",
+    "redux-first-history": "^5.2.0",
     "redux-logger": "3.0.6",
     "redux-persist": "6.0.0",
     "redux-saga": "0.16.2",

package.json

@@ -1,10 +1,10 @@
 import React, { Suspense } from 'react'
 import { useSelector } from 'react-redux'
-import { ConnectedRouter } from 'connected-react-router'
+import { Router } from 'react-router-dom'
 import { I18nextProvider } from 'react-i18next'
 
 import i18n from 'locales/i18n'
-import history from 'state/createdHistory'
+import { history } from 'state/store'
 import Auth from 'components/Auth'
 import ElectronMenu from 'components/ElectronMenu'
 import Header from 'components/Header'
@@ -17,14 +17,14 @@ function App() {
   return (
     <I18nextProvider i18n={i18n}>
       <Suspense fallback={<div className='app-loader' />}>
-        <ConnectedRouter history={history}>
+        <Router history={history}>
           {showElectronMenu && (<ElectronMenu />)}
           <Header />
           <div className='app'>
             <Auth />
             <Main />
           </div>
-        </ConnectedRouter>
+        </Router>
       </Suspense>
     </I18nextProvider>
   )

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { FocusStyleManager } from '@blueprintjs/core'
 import { PersistGate } from 'redux-persist/integration/react'
@@ -23,13 +23,13 @@ import packageInfo from '../package.json'
 
 const { version } = packageInfo
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'))
+root.render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <App />
     </PersistGate>
   </Provider>,
-  document.getElementById('root'),
 )
 
 window.addEventListener('load', () => {

src/index.js

@@ -1,3 +1,14 @@
 import { createBrowserHistory } from 'history'
+import { createReduxHistoryContext } from 'redux-first-history'
 
-export default createBrowserHistory()
+const {
+  createReduxHistory,
+  routerMiddleware,
+  routerReducer,
+} = createReduxHistoryContext({ history: createBrowserHistory() })
+
+export {
+  createReduxHistory,
+  routerMiddleware,
+  routerReducer,
+}

src/state/createdHistory.js

@@ -1,12 +1,11 @@
 import { combineReducers } from 'redux'
 import { persistReducer, createMigrate } from 'redux-persist'
-import { connectRouter } from 'connected-react-router'
 import storage from 'redux-persist/lib/storage'
 
 import config from 'config'
 import persistMigrations from 'state/persist.migrations'
 
-import history from './createdHistory'
+import { routerReducer } from './createdHistory'
 import accountBalanceReducer from './accountBalance/reducer'
 import accountSummaryReducer from './accountSummary/reducer'
 import affiliatesEarningsReducer from './affiliatesEarnings/reducer'
@@ -99,7 +98,7 @@ const BASE_REDUCERS = {
   profits: profitsReducer,
   publicFunding: publicFundingReducer,
   publicTrades: publicTradesReducer,
-  router: connectRouter(history),
+  router: routerReducer,
   routing: routingReducer,
   spayments: stakingPaymentsReducer,
   query: queryReducer,

src/state/reducers.js

@@ -1,5 +1,5 @@
 import { put, select, takeLatest } from 'redux-saga/effects'
-import { LOCATION_CHANGE, replace } from 'connected-react-router'
+import { LOCATION_CHANGE, replace } from 'redux-first-history'
 import { isEmpty } from '@bitfinex/lib-js-util-base'
 
 import { getTarget } from 'state/query/utils'
@@ -14,11 +14,15 @@ import { getLastRoute, getRouteParams } from './selectors'
 
 const { MENU_ORDER_TRADES } = queryConstants
 
+let isFirstRendering = true
+
 function* locationChange({ payload }) {
-  const { isFirstRendering, location } = payload
+  const { location } = payload
   const { pathname, search, state } = location
 
-  if (isFirstRendering) {
+  const isFirstRender = isFirstRendering
+  if (isFirstRender) {
+    isFirstRendering = false
     // redirects from legacy sections `deposits' and 'withdrawals' to 'movements' on first render
     if (pathname.includes('/deposits') || pathname.includes('/withdrawals')) {
       const [, , symbols] = pathname.split('/')
@@ -43,7 +47,7 @@ function* locationChange({ payload }) {
   }
 
   // return previously saved params on route change
-  if (route !== lastRoute && !isFirstRendering) {
+  if (route !== lastRoute && !isFirstRender) {
     const routeParams = yield select(getRouteParams, route)
     if (isEmpty(routeParams)) {
       const query = getQueryWithoutParams(Object.keys(FILTER_KEYS)) // remove filters of current section

src/state/routing/saga.js

@@ -6,11 +6,9 @@ import {
 import createSagaMiddleware from 'redux-saga'
 import { createLogger } from 'redux-logger'
 import { persistStore } from 'redux-persist'
-import { routerMiddleware } from 'connected-react-router'
-
 import reducer from './reducers'
 import saga from './sagas'
-import history from './createdHistory'
+import { createReduxHistory, routerMiddleware } from './createdHistory'
 
 const { REACT_APP_ENV } = process.env
 
@@ -20,7 +18,7 @@ function configureStore() {
   // eslint-disable-next-line no-underscore-dangle
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
   // add middlewares here
-  const middleware = [sagaMiddleware, routerMiddleware(history)]
+  const middleware = [sagaMiddleware, routerMiddleware]
   // use the logger in development mode - this is set in webpack.config.dev.js
   if (REACT_APP_ENV === 'development' || REACT_APP_ENV === 'staging') {
     middleware.push(createLogger())
@@ -33,6 +31,7 @@ function configureStore() {
 }
 
 const store = configureStore()
+const history = createReduxHistory(store)
 const persistor = persistStore(store)
 
 if (REACT_APP_ENV !== 'testing') {
@@ -41,6 +40,7 @@ if (REACT_APP_ENV !== 'testing') {
 
 export {
   configureStore,
+  history,
   persistor,
   store,
 }