So right now we just have our newsletterDetail.js, and it's not doing much. Let's connect it to our actions and Redux by saying import connect from react redux, as well as importing our actions.

Now let's connect it to our archive component using mapStateToProps I'm going quick at this point because we've done this a whole bunch of times. I'll give you a second to fill it out. You can always pause the video, but you know that's how we do it.

newsletterDetail.js

import React, { Component } from 'react';

import { connect } from 'react-redux';
import * as actions from '../../actions';

class NewsletterDetail extends Component {
    render() {
        return (
            <div className='newsletter-detail'>
                Newsletter Detail
            </div>
        )
    }
}

function mapStateToProps(state) {
    const { newsletterToEdit } = state.newsletters 
    return { newsletterToEdit };
}

export default connect(mapStateToProps, actions)(NewsletterDetail);

We just want to basically return the piece of state that we want. All we have to do is return it in an object and access it and actually make the call. Okay so any company did MT so once it mounts let's say this stuff prompts reference or actions. Now let's build our componentDidMount

newsletterDetail.js

import React, { Component } from 'react';

import { connect } from 'react-redux';
import * as actions from '../../actions';

class NewsletterDetail extends Component {

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


    render() {
        console.log(this.props.newsletterToEdit);
        return (
            <div className='newsletter-detail'>
                Newsletter Detail
            </div>
        )
    }
}

function mapStateToProps(state) {
    const { newsletterToEdit } = state.newsletters 
    return { newsletterToEdit };
}

export default connect(mapStateToProps, actions)(NewsletterDetail);

We're not going to use our data just yet, but instead, we set it up to log in the console for now. Let's try it out.

And what do you know, it fetched it correctly. I'm so surprised that I didn't do something wrong. There's always one little error, but not in this case. We done it, and we done it good. It's printing out id 115 Let's go back and select the second newsletter. Now is printing out 935.

Okay cool. So that's working. So what we need to do is we need to take this data and do something with it. Specifically, we need to render our objects on the page, which are things we've already created, so we'll do that in the next video.

Let's commit our code and move on.

git status
git add .
git commit -m "fetched newsletter with id for detail"

Resources

Code at this stage