OK so let's go ahead and let's take it by using this.props.match.params.id. So let me show you how this works. Let's go into newsletterEdit.js and what we want to do is basically use a function to get the id. Now we want to set up a componentDidMount function.

newsletterEdit.js

componentDidMount() {
    console.log(this.props.match.params.id);
}

Now the reason we don't use an underscore here is that in our bootstrap.js we're using just id, and we could call this whatever we want, so we're just using id without an underscore. And yeah that should be good.

Now let's go see if it prints out properly. when we check the browser, let's click on the edit button and we get the id in our console.

Now we just want to do something with this id. Now we could create a whole new action and fetch it or we could just patch all the items and we could filter through them here which is what I'd personally like to do, but with the way react-redux works, they say that the ideal way to use it is to perform all of your logic inside of reducers.

So we really want to filter it out and get it in the reducer so that we can keep our newsletter and that file really clean and not have any additional logic. We don't really want to do much filtering in here. We want to just get the piece of data. After performing an action and getting it from the store.

So let's go ahead and create this action by going into our reducers, but let's quickly mark it in our componentDidMount.

newsletterEdit.js

componentDidMount() {
    //this.props.fetchNewsletterWithId()
    console.log(this.props.match.params.id);
}

And then we're going to go into actions and go into newsletter.js and write a new function.

newsletter.js

export function fetchNewsletterWithId(id) {
    return {
        type: FETCH_NEWSLETTER_ID,
        payload: id
    }
}

Now, in order to do this we actually have to create our type. So once you get that typed out let's go over to types.js and add export const FETCH_NEWSLETTER_ID = 'FETCH_NEWSLETTER_ID'; Now we have to import this in two places, so let's go back to newsletter.js under the actions folder. At the top we'll import it.

So we can now call this but it's not going to do anything if we don't have it in our reducer and if we don't use this function in our index.js. Let's go to actions/index.js and let's import it from newsletter.js

Now that we've done that we can call it, but again nothing's going to happen until we go to our reducer and provide a case for this. Let's add that in our newsletterReducer.js.

newsletterReducer.js

import {
    SET_NEWSLETTERS,
    FETCH_NEWSLETTER_ID
} from '../actions/types';

const INITIAL_STATE = {
    newsletters: [],
    newsletterToEdit: {}
}

export default function(state = INITIAL_STATE, action) {
    switch (action.type) {
        case SET_NEWSLETTERS:
            const newsletters = action.payload;
            return {
                ...state,
                newsletters
            }
        case FETCH_NEWSLETTER_ID:
            const newsletterID = action.payload;
            var newsletterToEdit = {};
            state.newsletters.map(newsletter => {
                if(newsletter._id == newsletterID) {
                    newsletterToEdit = newsletter;
                }
            })
        default: return state;
    }
}

Pause the video if you need to take a second and write it out. Once you have this written out, what we need to do now is we need to return this.

newsletterReducer.js

        case FETCH_NEWSLETTER_ID:
            const newsletterID = action.payload;
            var newsletterToEdit = {};
            state.newsletters.map(newsletter => {
                if(newsletter._id == newsletterID) {
                    newsletterToEdit = newsletter;
                }
            })
            return {
                ...state,
                newsletterToEdit
            }
        default: return state;
    }
}

Now that will return a new copy of our state. So we'll want to go ahead and try this by going into our newsletterEdit here and performing this action when the component mounts and pass it in as props.match.params.id, but we have to connect redux and our actions to this component before we can do so.

Let's go ahead and commit our code and then in the next video we will do that.

git status
git add .
git commit -m "built fetchnewsletterwithid action and reducer"

Resources

Code at this stage