connected header and navbar components to redux store to get links

src/components/headernavbar/header.js

@@ -1,13 +1,35 @@
 import React, { Component } from 'react';
 
+import { connect } from 'react-redux';
+
 class Header extends Component {
     render() {
         return (
             <div className='header'>
                 <img src='http://via.placeholder.com/50x50'/>
+                <div className='header__links'>
+                {
+                    this.props.headerLinks.map((link, index) => {
+                        return (
+                            <a className='header__link' key={index} onClick={() => console.log('trying to switch tab')}>
+                                {link.title}
+                            </a>
+                        )
+                    })
+                }
+                </div>
             </div>
         )
     }
 }
 
+function mapStateToProps(state) {
+    const{ headerLinks } = state.headerNavbar;
+    return {
+        headerLinks
+    }
+}
+
+Header = connect(mapStateToProps)(Header);
+
 export default Header;

src/components/headernavbar/navbar.js

@@ -1,13 +1,32 @@
 import React, { Component } from 'react';
 
+import { connect } from 'react-redux';
+
 class Navbar extends Component {
     render() {
         return (
             <div className='navbar'>
-
+                {
+                    this.props.navbarLinks.map((link, index) => {
+                        return (
+                            <a className='navbar__link' key={index} onClick={() => console.log('trying to switch tab')}>
+                                {link.title}
+                            </a>
+                        )
+                    })
+                }
             </div>
         )
     }
 }
 
+function mapStateToProps(state) {
+    const{ navbarLinks } = state.headerNavbar;
+    return {
+        navbarLinks
+    }
+}
+
+Navbar = connect(mapStateToProps)(Navbar);
+
 export default Navbar;

src/reducers/headernavbarReducer.js

@@ -4,8 +4,22 @@ import {
 } from '../actions/types';
 
 const INITIAL_STATE = {
-    headerLinks: [],
-    navbarLinks: []
+    headerLinks: [
+        {
+            title: 'yooo'
+        },
+        {
+            title: 'YOOO'
+        }
+    ],
+    navbarLinks: [
+        {
+            title: 'account'
+        },
+        {
+            title: 'purchases'
+        }
+    ]
 }
 
 export default function(state = INITIAL_STATE, action) {

src/reducers/index.js

@@ -1,11 +1,11 @@
 import { combineReducers } from 'redux';
 import { reducer as form } from 'redux-form'; 
 
-import HeaderNavbar from './headernavbarReducer';
+import headerNavbar from './headernavbarReducer';
 
 const rootReducer = combineReducers({
   form,
-  HeaderNavbar
+  headerNavbar
 });
 
 export default rootReducer;