So now we have a newsletter action file set up with an action creator called fetchNewsletters. We're simulating a GET request by coding data in here and setting it as the payload. Now we're dispatching an action called SET_NEWSLETTERS to our reducers.

Our reducer then goes into newsletters and it goes to a function that gets sent newsletters and it takes those newsletters from the payload or the response data and it returns a new copy of our state which initially contained an empty collection called newsletter's, but now it contains a collection called newsletters.

OK with this data we can now access it in our applications stay under newsletters newsletters. Right. So what we need to do is simply get this data using mapStateToProps in react redux in our archive component and place the data in there, and then do the same with our latest component.

So right now let's go to our code and let's just head over to newsletterArchive.js. So this is going to be really simple.

Now we'll use connect down in our export default. We'll also need to build a function for connect to work, so that we can actually bring in our data.

newsletterArchive.js

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

export default connect(mapStateToProps)(NewsletterBox);

This function takes in state as a parameter and then we can basically choose what parts of state we want to access so we have access to all items. We want to access newsletters. What that's going to do is it's going to go into our state and into newsletter's and it's going to take these newsletters out of it.

So if we had named something else like items instead of newsletters, we would have to make sure that we are using the corect names of our reducers. Now we just need to return those newsletters to our props now that we've done this, since we have access to our newsletters using this thought process.

So instead of us hard-coding these archives items in here, all we have to do is map over newsletters and render in our items. So let's get rid of three of these and put in brackets here.

newsletterArchive.js

class NewsletterArchive extends Component {
    render() {
        return (
            <div className='newsletter-archive'>
                <div className='newsletter-archive__title'>Archive</div>
                <div className='newsletter-archive__items archive-items'>
                    {/* newsletter items */}

                    {
                        this.props.newsletters.map(newsletter => {
                            return <ArchiveItem key={newsletter._id} {...newsletter}/>
                        })
                    }
                </div>
            </div>
        )
    }
}

This is going to give us access to all of our properties without having to manually type them out. And it's a lot cleaner syntax. With the way we set up our account item it's just going to render all that for us already. We've already set it up in archive item to take this data. It's just above it.

So let's go into our application and see what that looks like.

And it looks like we have our data. You might be wondering why didn't we just use index in this map. And that's because it would be more syntax and more logic that we don't need clutters things up.

So that's how we get the data in our archive. Now what we need to do is get it into the newsletter latest component.

Let's commit our code.

git status
git add .
git commit -m "hooked up newsletterarchive to redux store mapstatetoprops to display newsletters data in the archive"

See you in the next video.

Resources

Code at this stage