connect navBar to the sotre

src/components/NavBar.tsx

@@ -1,17 +1,23 @@
 import React, {FC} from 'react';
+// Routing
 import {Link} from 'react-router-dom';
+import * as ROUTES from '../constants/routes';
+//Redux
+import {connect} from 'react-redux';
+import {selectAuthState} from '../store/auth';
+// Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCode, faSignOutAlt, faUser} from '@fortawesome/free-solid-svg-icons';
-import * as ROUTES from '../constants/routes';
 
 interface IProps {
-  isAuthenticated?: boolean;
-  loading?: boolean;
+  isAuthenticated: boolean;
+  loading: boolean;
 }
 /**
  * Main Navbar serves navigation routes.
  */
-const NavBar: FC<IProps> = ({isAuthenticated = false, loading = false}) => {
+const NavBar: FC<IProps> = ({isAuthenticated, loading}) => {
+  console.log(isAuthenticated, loading);
   const publicLinks = (
     <ul data-testid="publicLinks">
       <li>
@@ -74,4 +80,5 @@ const NavBar: FC<IProps> = ({isAuthenticated = false, loading = false}) => {
   );
 };
 
-export default NavBar;
+/** connect HOC subscribes to the store */
+export default connect(selectAuthState)(NavBar);

src/store/auth/index.ts

@@ -1,15 +1,33 @@
 import {createSlice} from '@reduxjs/toolkit';
+import {RootState} from '..';
+
+interface SliceState {
+  isAuthenticated: boolean;
+  loading: boolean;
+  // TODO: switch any by the actual user interface
+  user: any;
+}
+
+const initialState: SliceState = {
+  isAuthenticated: false,
+  loading: true,
+  user: null,
+};
 
 const authSlice = createSlice({
   name: 'auth',
-  initialState: {
-    isAuthenticated: false,
-    loading: true,
-    user: null,
-  },
+  initialState,
   reducers: {},
 });
 
+// export actions
 export const {} = authSlice.actions;
 
+// export selectors
+export const selectAuthState = (state: RootState) => {
+  const {isAuthenticated, loading} = state.auth;
+  return {isAuthenticated, loading};
+};
+
+// export reducer
 export default authSlice.reducer;

src/store/index.ts

@@ -7,4 +7,7 @@ const store = configureStore({
   },
 });
 
+// State type
+export type RootState = ReturnType<typeof store.getState>;
+
 export default store;