Well, what we need to do now is we need to make it so when we login we go to our account so we can edit some information. Let's see the design, we've got purchase history and then we got the account information. So a big part in doing this is getting these links built. Now, this is pretty important that we built this correctly because when we go to the shop we also have links.

So a good idea would be to create a component that will allow us to set links with react redux right, we want to be able to use a component that has links like this throughout our application. So what we need to do is develop a component to do that instead of just hopping into purchase history right away. So what we need to do is close out our terminal and start developing that component.

Okay so let's go into navbar.js and what we need to do is we essentially just need to map over some state that we're going to set using redux because we want to be able to use this through our application and we don't want to have to redeclared the navbar and everything in our components, we just want to use the same one that's declared in lay out here, we just want to keep this here.

So this is actually pretty simple just going to take a little bit to get all functional and write out, but the logic behind it is pretty simple once you understand it. So what we need to do is we need to set up a reducer, okay. Let's go into reducers and create a new file and let's call it navigation or something because we're going to have buttons, so let me explain a little bit.

We are going to have buttons up here too, do you see where it says shop?

We want to have buttons up here too and they're going to be different throughout the application as well. So let's go ahead and set it up so we're going to basically have that functionality so we can change it throughout our app. Okay so what we need to do is go to reducers and create a new file and call it headernavbarReducer.js.

Now in here we do need type's but that's not the main concern here. The main concern is state right now, so it's a constant initial state is equal to and we're going to have some header links and then we're going to have some navbarLinks. Okay cool, so let's export the default function, so export default function state is going to be equal to initial state and we're going to pass in an action.

In here, we want to switch in between our actions, so let's say action.type and the value is going to be of type SET_HEADER_LINKS and then we're going to have a case called SET_NAVBAR_LINKS. Okay and then in the default case we just want to return state all right.

In here, in SET_HEADER_LINKS all we want to do is say return and then we just want to override header links. So we want to say ...state so NAVBAR_LINKS stays the same if we don't decide to change it. And then we want to say header links is equal to action.payload because that's where we're going to past through.

Now we're going to do the same exact thing in SET_NAVBAR_LINKS so lets just copy this return statement and paste it in here, except for now we're going to do it with the navbarLinks not the headerLinks, so just replace headerLinks with navbarLinks.

headernavbarReducer.js

const INITIAL_STATE = {
    headerLinks: [],
    navbarLinks: []
}

export default function(state = INITIAL_STATE, action) {
    switch (action.type) {
        case SET_HEADER_LINKS:
            return {
                ...state,
                headerLinks: action.payload
            }
        case SET_NAVBAR_LINKS:
            return {
                ...state,
                headerLinks: action.payload
            }
        default: return state;
    }
}

So really simple stuff that's the reducer for it. But now we need to set these types up so we don't get an error when we try to compile our application, so we have SET_NAVBAR_LINKS and SET_HEADER_LINKS.

Let's go to our types.js we actually haven't made it yet. So let's scroll up and let's go into our actions folder and create a new file called type.js. In here, we're going to export our types so export SET_HEADER_LINKS is equal to SET_HEADER_LINKS and lets make this a constant. Okay, so get these two lines in here we've got header and navbar, okay so get these two lines in here. Export const SET_HEADER_LINKS and export const SET_NAVBAR_LINKS.

types.js

export const SET_HEADER_LINKS = 'SET_HEADER_LINKS';
export const SET_NAVBAR_LINKS = 'SET_NAVBAR_LINKS';

All right, we can close that.

Now we just have to import it into our reducer, let's say import SET_HEADER_LINKS and SET_NAVBAR_LINKS from ../actions/types.

headernavbarReducer.js

import {
    SET_HEADER_LINKS,
    SET_NAVBAR_LINKS
} from '../actions/types';

Okay, so that should set up our reducer. Let's go ahead and see if we can see this in our redux DevTools. Okay so get this all in, make sure you've got the types in your type's file, and let's go check it out.

All right let's go in here, let's go to the home and you don't see anything except for form.

Now the reason being is because in our reducer index.js we didn't actually import it and put it into our combineReducers call. So let's import it, let's say import HeaderNavbar from ./headernavbarReducer. Let's put a comma after form and let's put HeaderNavbar.

index.js

import { combineReducers} from 'redux';
import { reducer as form } from 'redux-form';

import HeaderNavbar from './headernavbarReducer';

const rootReducer = combineReducers({
    form,
    HeaderNavbar
});

export default rootReducer;

Okay, now let's go check it out in Chrome, let's wait for it reload or reload it automatically. Looks like we don't have anything, let's see, lets go to chart, there we go, it's there now.

Okay so you'll see now that we have HeaderNavbar and headerLinks and navbarLinks. So the idea here is that these are going to be able to change throughout our application when we decide to change them. And then in our code, what we want to do in the navbar.js and header.js files is we want to basically map over these and display some links. We just want to map over that data and display links to where we want to go.

So what we need to do is, we need to set up an action to actually change those to put data in there to map over. Now before we do that let's just map over these items in both of our files and display them so you understand what we're doing before we get into all the actions to modify our reducer there.

So let's commit our code and do that in the next video.

Terminal

git status
git add .
git commit -m "built headernavbar reducer"

I'll see you in the next video.

Resources

Source code