Store.js import { applyMiddleware } from 'redux'; import { configureStore } from '@reduxjs/toolkit' import { composeWithDevTools } from 'redux-devtools-extension'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const initialState = {}; const middleware = [thunk]; const store = configureStore({ reducer: { authReducer: rootReducer, starterState : initialState, devTools: composeWithDevTools(applyMiddleware(...middleware)), } }); export default store; index.js (rootReducer) import { combineReducers } from 'redux'; import auth from './auth'; export default combineReducers({ auth }); auth.js import { LOGIN_SUCCESS, LOGIN_FAIL, USER_LOADED_SUCCESS, USER_LOADED_FAIL, AUTHENTICATED_SUCCESS, AUTHENTICATED_FAIL, PASSWORD_RESET_SUCCESS, PASSWORD_RESET_FAIL, PASSWORD_RESET_CONFIRM_SUCCESS, PASSWORD_RESET_CONFIRM_FAIL, SIGNUP_SUCCESS, SIGNUP_FAIL, ACTIVATION_SUCCESS, ACTIVATION_FAIL, LOGOUT } from '../actions/types'; const initialState = { access: localStorage.getItem('access'), refresh: localStorage.getItem('refresh'), isAuthenticated: null, user: null }; export default function (state = initialState, action) { const { type, payload } = action; switch (type) { case AUTHENTICATED_SUCCESS: return { ...state, isAuthenticated: true } case LOGIN_SUCCESS: localStorage.setItem('access', payload.access); localStorage.setItem('refresh', payload.refresh); return { ...state, isAuthenticated: true, access: payload.access, refresh: payload.refresh } case SIGNUP_SUCCESS: return { ...state, isAuthenticated: false } case USER_LOADED_SUCCESS: return { ...state, user: payload } case AUTHENTICATED_FAIL: return { ...state, isAuthenticated: false } case USER_LOADED_FAIL: return { ...state, user: null } case LOGIN_FAIL: case SIGNUP_FAIL: case LOGOUT: localStorage.removeItem('access'); localStorage.removeItem('refresh'); return { ...state, access: null, refresh: null, isAuthenticated: false, user: null } case PASSWORD_RESET_SUCCESS: case PASSWORD_RESET_FAIL: case PASSWORD_RESET_CONFIRM_SUCCESS: case PASSWORD_RESET_CONFIRM_FAIL: case ACTIVATION_SUCCESS: case ACTIVATION_FAIL: return { ...state } default: return state } }; Navbar,js import React, { Fragment, useState } from 'react'; import { Link, Navigate } from 'react-router-dom'; import { connect } from 'react-redux'; import { logout } from '../actions/auth'; const Navbar = ({ logout, isAuthenticated }) => { const [redirect, setRedirect] = useState(false); const logout_user = () => { logout(); setRedirect(true); }; const guestLinks = () => ( ... ); const authLinks = () => ( ... ); return ( <... {isAuthenticated ? authLinks() : guestLinks()} ... ); }; const mapStateToProps = state => ({ isAuthenticated: state.auth.isAuthenticated }); export default connect(mapStateToProps, { logout })(Navbar);