Let's go ahead and create an action creator, and what we'll do is we'll just create a file and call the file header.js and in here we're going to want to say, this is what we're going to want to do, we're going to want to creative a type. So let's go into types.js let's go down here and say //header.

And we'll say export const SET_HEADER_TITLES and I'll say equal to SET_HEADER_TITLES, okay excellent.

types.js

export const AUTHENTICATE_USER = 'AUTHENTICATE_USER';

// NEWSLETTER ACTIONS
export const SET_NEWSLETTERS = 'SET_NEWSLETTERS';
export const FETCH_NEWSLETTER_ID = 'FETCH_NEWSLETTER_ID';

// REQUESTS ACTIONS 
export const CHANGE_SELECTED_REQUEST_TYPE = 'CHANGE_SELECTED_REQUEST_TYPE';
export const SET_REQUESTS = 'SET_REQUESTS';

// HEADER
export const SET_HEADER_TITLES = 'SET_HEADER_TITLES';

Let's take this and let's go back into headers and let's say import set header titles from ./types.

header.js

import { SET_HEADER_TITLES } from './types';

Now what we need to do is export a function so let's say export function setHeaderTitles(). This is going to take two properties and as a matter of fact, yeah we'll do this, we're going to have to create two actions because of what we're going to do. But we could, so like the idea is we are going to pass in the title and subtitle but we might want to pass in the bar status too.

So what we'll do is, we'll just say update header okay. And what we'll do let's rename the type to UPDATE_HEADER

header.js

import { UPDATE_HEADER } from './types';

export function updateHeader()

types.js is going to be UPDATE_HEADER

types.js

export const AUTHENTICATE_USER = 'AUTHENTICATE_USER';

// NEWSLETTER ACTIONS
export const SET_NEWSLETTERS = 'SET_NEWSLETTERS';
export const FETCH_NEWSLETTER_ID = 'FETCH_NEWSLETTER_ID';

// REQUESTS ACTIONS 
export const CHANGE_SELECTED_REQUEST_TYPE = 'CHANGE_SELECTED_REQUEST_TYPE';
export const SET_REQUESTS = 'SET_REQUESTS';

// HEADER
export const UPDATE_HEADER = 'UPDATE_HEADER';

and what we're going to do is we are going to have this take three parameters. The first is going to be the title, then we're going to take the subtitle, and the gray bar status. Okay so we'll call it hideBar and if it's true it will hide the bar, okay and then we'll just say return and then we'll say basically we want to return the type which is going to be update header and the payload, and the payload is going to be title, subtitle, and hideBar in an object.

header.js

import { UPDATE_HEADER } from './types';

export function updateHeader(title, subtitle, hideBar) {
    return {
        type: UPDATE_HEADER,
        payload: {title, subtitle, hideBar}
    }
}

Okay, so this is all I've written in this video so far, is in this header.js file this function and import. And then I also added a type called UPDATE_HEADER. OK so these two lines right here at the bottom of types.js and in header.js these 8 lines, that's all I've added in this video, about 10 lines of code.

Okay so get this all in, and then let's continue on in this video. Let's go into index.js and at the bottom here let's say import and we'll say updateHeader from ./updateHeader or sorry header.

index.js

import {
    updateHeader
} from './header';

export {
    signUp,
    signIn,
    fetchNewsletters,
    fetchNewsletterWithId,
    changeSelectedRequestType,
    createNewRequest,
    fetchRequests,
    changeStatus,
    createNewNewsletter,
    editNewsletter,
    updateHeader
};

So we're just importing this function updateHeader into index.js. Now what we want to do is we want to export it out of our index.js now so we have access to it, so that's all we've done. So these three lines and this line, so far we've written 14 lines of code in this video. All right so that's set up, let's go ahead and write the reducer now for updateHeader.

Let's go into our reducers, let's create a new file and let's call this file headerReducer.js and in here we want to import our actions so import UPDATE_HEADER from ../actions/types. Now what we want to do is write a function that will handle this case, so export default function state is equal to INITIAL_STATE and then we want our action.

Alright, so let's write our initial state so const initial state is equal to a javascript object which is going to contain a title, a subtitle, and a status for the headers, so hideBar, which is going to be by default set to false and we want to show it on the login screen.

Now what we want to do is say in here switch, and select the javascript switch statement. So right here you're just going to want to write out switch with a key, and some brackets, and then a couple cases in here.

By the default case, we just want to return state the way it is, we're likely to never even hit this case, but if for some reason we got a different action or we didn't handle the action we will hit that and it would do nothing to our state. Okay now in that case that it hits UPDATE_HEADER, let's go ahead and let's say, all right, let's return some state here.

Let's take our state and let's provided it with a constant. All right let's take constant and let's have title, subtitle, and hideBar and we'll take it out of the action.payload. Alternatively you can just say const titles = action.payload.title; and so on, but that would be a lot of code. So we don't want to do that, let's do this syntax, it's a lot cleaner.

Now what we can do is return the title, subtitle, and hideBar. So we can say title, subtitle, and hideBar. Alternatively if you want to be less verbose and just kind of get straight to the point, you can just say return action.payload and this is the only case we're going to be having in this file, so it wouldn't matter to not add in ...state.

But say for instance we have another case, we really would want to add in ...state and just to be extra careful let's just add it in anyway. Because we still want to take all of our existing values just in case we say hey we only updated hideBar for whatever reason using a different case.

So this right here these lines right here, these two with this return around it, is the same exact thing as this.

But the advantage of writing it in this more verbose kind of syntax is that you know exactly what's going on. We are saying okay, we have a title, subtitle, hideBar and we are overwriting those, so that's what we're going to do. I'm going to leave this return statement here just because I want you leave it there so you can reference it because I want you to realize that's the same exact thing.

The reason it works is because we're using the spread operator on action.payload down here. If we weren't to be using the spread operator it wouldn't work, we have to spread it apart. It's exactly like what we're doing here in our const we're spreading it apart. Okay so that is the reducer.

Let's go ahead and put it in all of our our files where we need to in the next video. Let's go ahead and commit our code.

Terminal

git status
git add .
git commit -m "built action creator and reducer for header and update header type"

Okay, I'll see you in the next video.

Resources

Source code