Fixed #1

package.json

@@ -10,6 +10,7 @@
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
     "classnames": "^2.2.6",
+    "connected-react-router": "^6.8.0",
     "dotenv": "^8.2.0",
     "history": "^4.10.1",
     "jwt-decode": "^2.2.0",

src/actions/user.actions.js

@@ -1,7 +1,8 @@
+import { push } from 'connected-react-router'
+
 import { tokensConstants, userConstants } from '../constants'
 import { usersService } from '../services'
 import { alertActions } from './'
-import { history } from '../helpers'
 
 const requestTokenPair = () => ({
 	type: userConstants.REFRESH_TOKENS
@@ -23,15 +24,16 @@ const login = (login, password) => async dispatch => {
 			accessToken
 		})
 		dispatch(alertActions.clear())
+		dispatch(push('/'))
 	} catch (err) {
 		dispatch(failure())
 		dispatch(alertActions.error(err.statusText))
 	}
 }
 
-const logout = () => {
-	history.push('/')
-	return logoutWithoutRedirect()
+const logout = () => dispatch => {
+	dispatch(logoutWithoutRedirect())
+	dispatch(push('/'))
 }
 
 const logoutWithoutRedirect = () => {
@@ -51,6 +53,7 @@ const register = (email, login, password) => async dispatch => {
 		dispatch(request())
 		await dispatch(success())
 		dispatch(alertActions.clear())
+		dispatch(push('/'))
 	} catch (err) {
 		dispatch(failure())
 		dispatch(alertActions.error(err.statusText))

src/components/Root/Root.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { Provider } from 'react-redux'
-import { Router } from 'react-router-dom'
+import { ConnectedRouter } from 'connected-react-router'
 import {
 	ThemeProvider,
 	CssBaseline,
@@ -11,9 +11,8 @@ import PropTypes from 'prop-types'
 
 import Header from '../Header'
 import Main from '../../pages/Main'
-import { history } from '../../helpers'
 
-const Root = props => {
+const Root = ({ store, history }) => {
 	const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
 
 	const theme = useMemo(
@@ -27,20 +26,21 @@ const Root = props => {
 	)
 
 	return (
-		<Provider store={props.store}>
+		<Provider store={store}>
 			<ThemeProvider theme={theme}>
 				<CssBaseline />
-				<Router history={history}>
+				<ConnectedRouter history={history}>
 					<Header />
 					<Main />
-				</Router>
+				</ConnectedRouter>
 			</ThemeProvider>
 		</Provider>
 	)
 }
 
 Root.propTypes = {
-	store: PropTypes.object.isRequired
+	store: PropTypes.object.isRequired,
+	history: PropTypes.object.isRequired
 }
 
 export default Root

src/constants/alert.constants.js

@@ -1,5 +1,5 @@
 export const alertConstants = {
-	SUCCESS: 'ALERT_SUCCESS',
-	ERROR: 'ALERT_ERROR',
-	CLEAR: 'ALERT_CLEAR'
+	SUCCESS: 'alert/SUCCESS',
+	ERROR: 'alert/ERROR',
+	CLEAR: 'alert/CLEAR'
 }

src/constants/cabinet.constants.js

@@ -1,6 +1,6 @@
 export const cabinetConstants = {
-	CABINET_REQUEST: 'CABINET_REQUEST',
-	CABINET_SUCCESS: 'CABINET_SUCCESS',
-	CABINET_FAILURE: 'CABINET_FAILURE',
-	CABINET_CLEAR: 'CABINET_CLEAR'
+	CABINET_REQUEST: 'cabinet/REQUEST',
+	CABINET_SUCCESS: 'cabinet/SUCCESS',
+	CABINET_FAILURE: 'cabinet/FAILURE',
+	CABINET_CLEAR: 'cabinet/CLEAR'
 }

src/constants/react.constants.js

@@ -1,5 +1,5 @@
 export const reactConstants = {
-	FETCH_PENDING: 'FETCH_PENDING',
-	FETCH_SUCCESS: 'FETCH_SUCCESS',
-	FETCH_FAILURE: 'FETCH_FAILURE'
+	FETCH_PENDING: 'react/PENDING',
+	FETCH_SUCCESS: 'react/SUCCESS',
+	FETCH_FAILURE: 'react/FAILURE'
 }

src/constants/tokens.constants.js

@@ -1,9 +1,8 @@
 export const tokensConstants = {
-	TOKENS_SET: 'TOKENS_SET',
-	REFRESH_TOKENS: 'REFRESH_TOKENS',
+	TOKENS_SET: 'tokens/SET',
 
-	TOKENS_REQUEST: 'TOKENS_REQUEST',
-	TOKENS_SUCCESS: 'TOKENS_SUCCESS',
-	TOKENS_FAILURE: 'TOKENS_FAILURE',
-	TOKENS_CLEAR: 'TOKENS_CLEAR'
+	TOKENS_REQUEST: 'tokens/REQUEST',
+	TOKENS_SUCCESS: 'tokens/SUCCESS',
+	TOKENS_FAILURE: 'tokens/FAILURE',
+	TOKENS_CLEAR: 'tokens/CLEAR'
 }

src/constants/user.constants.js

@@ -1,11 +1,11 @@
 export const userConstants = {
-	REGISTER_REQUEST: 'REGISTER_REQUEST',
-	REGISTER_SUCCESS: 'REGISTER_SUCCESS',
-	REGISTER_FAILURE: 'REGISTER_FAILURE',
+	REGISTER_REQUEST: 'user/register/REQUEST',
+	REGISTER_SUCCESS: 'user/register/SUCCESS',
+	REGISTER_FAILURE: 'user/register/FAILURE',
 
-	LOGIN_REQUEST: 'LOGIN_REQUEST',
-	LOGIN_SUCCESS: 'LOGIN_SUCCESS',
-	LOGIN_FAILURE: 'LOGIN_FAILURE',
+	LOGIN_REQUEST: 'user/login/REQUEST',
+	LOGIN_SUCCESS: 'user/login/SUCCESS',
+	LOGIN_FAILURE: 'user/login/FAILURE',
 
-	LOGOUT: 'LOGOUT'
+	LOGOUT: 'user/LOGOUT'
 }

src/helpers/index.js

@@ -1,3 +1,2 @@
-export * from './history'
 export * from './store'
 export * from './auth-header'

src/helpers/store.js

@@ -1,6 +1,14 @@
 import { createStore } from 'redux'
-import rootReducer from '../reducers'
 import { composeWithDevTools } from 'redux-devtools-extension'
-import middleware from '../middleware'
+import rootReducer from '../reducers'
+import createMiddleware from '../middleware'
+import { createBrowserHistory } from 'history'
+
+export const history = createBrowserHistory()
 
-export const store = createStore(rootReducer, composeWithDevTools(middleware))
+export const configureStore = preloadedState =>
+	createStore(
+		rootReducer(history),
+		preloadedState,
+		composeWithDevTools(createMiddleware(history))
+	)

src/index.js

@@ -3,9 +3,13 @@ import ReactDOM from 'react-dom'
 
 import Root from './components/Root/Root'
 import * as serviceWorker from './serviceWorker'
-import { store } from './helpers'
+import { configureStore, history } from './helpers'
 
-ReactDOM.createRoot(document.getElementById('root')).render(<Root store={store} />)
+const store = configureStore()
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+	<Root store={store} history={history} />
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/middleware/index.js

@@ -1,5 +1,7 @@
 import { applyMiddleware } from 'redux'
 import thunkMiddleware from 'redux-thunk'
 import { createLogger } from 'redux-logger'
+import { routerMiddleware } from 'connected-react-router'
 
-export default applyMiddleware(thunkMiddleware, createLogger())
+export default history =>
+	applyMiddleware(thunkMiddleware, routerMiddleware(history), createLogger())

src/pages/Cabinet/index.js

@@ -1,7 +1,6 @@
-import React, { Suspense } from 'react'
+import React, { Suspense, useEffect, useState } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { Redirect } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { userActions, cabinetActions, tokensActions, alertActions } from '../../actions'
 import { api } from './api'
@@ -30,21 +29,17 @@ const CabinetPage = ({
 	clearCabinet,
 	clearAlert
 }) => {
-	if ((tokensRefreshFailed || failedToLoad) && !alert.message) {
-		clearCabinet()
-		clearTokens()
-		logout()
-		return <Redirect to='/login' />
-	}
-
 	return (
 		<Suspense fallback={<MUIBackdropProgress />}>
-			{alert.message ? (
+			{alert.message && (failedToLoad || tokensRefreshFailed) ? (
 				<MUIAlertDialog
 					title={alert.message}
 					text={errorText}
 					onClose={() => {
 						clearAlert()
+						clearCabinet()
+						clearTokens()
+						logout()
 					}}
 				/>
 			) : (
@@ -82,7 +77,7 @@ const mapDispatchToProps = dispatch =>
 	bindActionCreators(
 		{
 			cabinetLoad: cabinetActions.load,
-			logout: userActions.logoutWithoutRedirect,
+			logout: userActions.logout,
 			loadCabinet: api.loadCabinet,
 			clearCabinet: cabinetActions.clear,
 			clearTokens: tokensActions.clear,

src/reducers/index.js

@@ -1,17 +1,20 @@
 import { combineReducers } from 'redux'
+import { connectRouter } from 'connected-react-router'
 
 import { auth } from './auth.reducer'
 import { alert } from './alert.reducer'
 import { tokens } from './tokens.reducer'
 import { cabinet } from './cabinet.reducer'
 import { react } from './react.reducer'
 
-const rootReducer = combineReducers({
-	auth,
-	tokens,
-	alert,
-	cabinet,
-	react
-})
+const rootReducer = history =>
+	combineReducers({
+		router: connectRouter(history),
+		auth,
+		tokens,
+		alert,
+		cabinet,
+		react
+	})
 
 export default rootReducer

src/services/users.service.js

@@ -6,11 +6,9 @@ import {
 	setRefreshToken,
 	setUser
 } from '../utils'
-import { history } from '../helpers'
 
 const register = async (email, login, password) => {
 	await payloadFetch(`${config.api.url}/auth/register`, { email, login, password })
-	history.push('/')
 }
 
 const login = async (login, password) => {