Join Richard Gill for an in-depth discussion in this video Connecting your components to the store, part of Performing Complex State Management with Redux.
- [Instructor] Section 2, Using Redux in Your Applications. In this section, we're going to learn how to connect your components to the store, how to fire actions, we're going to do a recap of what ES6/7 spreading is, because it's really useful for Redux, and we're going to look at applying Redux reducers to the application. Connecting Your Components to the Store. In this video, we are going to take a quick look at how you can connect your components to the store. Which means, allowing your components to see the data that's in the store.
I've taken the provider which was wrapping Lasernator's stuff, and I moved all that stuff into its own file, called redditPosts. You probably wanna do this in your app as well. It's the same code as before, it's now just split over app.js and redditPosts. RedditPosts looks exactly the same as how app.js looked originally when we started this course. You've got this, we've just covered the store, and we can see that there's stuff in the store. Now the question is, how do we get our components to be able to see what's in the store? How do we get access to what's in the store in code in a component and just programmatically.
So to start off with, I'm gonna show you how you get access to it programmatically, not in a component. So to do that, let's say in app.js we've got access to the store here, so this is the store object and we're passing it into provider. I'm just gonna console.log this, just so we can have a little look at the store. And now in the programs running, So this is the store, you can see what stuff you can do. Dispatch, which we did in the last video, so you can dispatch an action. We'll cover that in more detail in another video. GetState, replace reducer, subscribe.
So the one we wanna look at is called getState. So let's quickly log that, store.getState. Let's have a look at what happens when we do that. So now we can see the state of the store, which has posts in it. And that is consistent with what we were seeing before in the last video. So that's really simple, I just wanted to show you that. This is how you get the current state of the store in code, if you've got a store object, which we're importing here form our store which we created. I'll show you how you create a store in a later video.
But yeah, so that's how you get the whole state. So the next question is, how do you put stuff that's in the redux store on the screen? So to use that, we use a library called, react redux, which we've already installed in this project. So let's have a look. So the first thing is we need to import it. So let me show you how you do that. So we just import by saying, import, we import this connection function from react-redux. The next thing is to use the connect function.
So before we were export default RedditPosts, now we export default and then we connect, we pass some sort of lander or a function in here, and then we pass in RedditPosts in at the end. Now, what this function does is it wraps RedditPosts and applies this function to the state and gives access to this thing in props. Gives access to the store in props. Now, I said all that quite quickly, so let me just go over that point by point. So the first thing is you call in the connect function to connect your store to your component.
So we've got connect the store to the component, and you pass in the last argument is the component that you wanna connect the store to. And then, in the first argument, what's going on here? So it's a lander with one argument, and that argument is often called state. Now, state is the thing when we load getState, so at the moment, our state only has posts in it. So it's the state of the whole redux store that we saw in the last video. And then you can just grab a piece of it, or grab some pieces of it. Or you can do whatever you want in here. So I've just done state.posts, say I don't want everything that's in the store, I just want the posts.
But you could just say state => state and you get the whole state. But usually you'll just want a bit. You can run more complicated code in here, that maybe does some logic if you want, we'll come into that in a later video as well. So this is kind of the pattern. This whole thing I've selected here returns a component. So it returns something which will look like a Reddit post component, but it will have certain props. So let me show you what that does. So you can see up here I've added a line, console.log(this.props). So we're just gonna see what the props are. So now when we run the program, you can see it's logged the props and the props have dispatch in there.
So that's just a shorthand to be able to dispatch an action, we'll come on to that later. And it has posts, because we told it to. So this is the post part of the store. And now they're in props. Which means that you can like, let's just dump them on the screen real fast, so I'm just gonna put them in here. So, this.props.posts, let's see if that works and then what that will do. Maybe break. No, you can see it here, post one. So it's put this thing on the screen. So it's really simple, use the connect function to take some part of the store, so here I've done state.posts, so just the posts part of the store, and then it becomes available in this.props.
And now the magic of redux, if the state of the store changes, then these props would just change automatically. So you don't really have to worry about, oh, you know, what's going on in the store, you just say, this.props. the thing from the store you wanted, that you've like, connected to here, and if that thing changes, the react will automatically re-render this component and this.props.posts will be a different value. So it just kinda takes care of it for you. So you don't really have to worry, your components just kind of like, which bits of state do I need access to, and they're gonna be accessible in props, and then I put them on the screen.
So it's really simple, and that's how you grab information from the store and put it on the screen of your react app. At this video, we looked at connecting your components to the store, the libraries that you need to do that, and how it works in practice with some code examples. In the next video, we're gonna take a look at firing actions.
Note: This course was created by Packt Publishing.
- What is Redux?
- Connecting your components to the store
- Firing actions
- Applying Redux reducer
- Using advanced reducers
- Dispatching asynchronous actions with Thunk
- Building a workable application