‫So now it's time
‫to finally connect our Redux store
‫with the React application.
‫And so to do that, we need to bring in another package,
‫and so that is React Redux package,
‫and so only through this package
‫is how Redux and React applications
‫can actually talk to each other.
‫So let's wait for this to install,
‫and now once they're done,
‫let's actually provide our store to the application.
‫And so this actually works
‫in a very similar way as the Context API.
‫So let me show you.
‫What we need to import now
‫from the React Redux package is the provider.
‫So, just like this,
‫and now we can wrap our entire application in that provider.
‫So again, just like we do with the Context API,
‫so we use the provider component
‫place the application in there,
‫and now here we need to pass the store prop.
‫So, a prop called store, and as you can guess,
‫this is where we pass in our Redux store.
‫So, that is also called store.
‫So, this one right here.
‫And with this, we have then successfully connected the two.
‫So, that's it.
‫So, now our application knows about the Redux store,
‫and so now our application knows about the Redux store
‫which means that every single component
‫in the application can now read data from the store
‫and can dispatch actions to it.
‫So, that is once again very similar
‫to the behavior that we see in the Context API.
‫So, it's basically broadcasting global state
‫into every component that actually wants to read it.
‫So, let's start then by reading the state.
‫So, let's come here to the customer component.
‫So, this is our simplest one,
‫and so let's start with this one.
‫So, in order to read data from the Redux store,
‫all we have to do is to use the use selector hook
‫that is provided by React Redux.
‫So use Selector and there we immediately see it,
‫as it has been imported from React Redux.
‫So again, this package is necessary
‫so that these two technologies can talk to each other.
‫Now, this useSelector hook takes a callback function,
‫and this function takes as the single argument,
‫the entire Redux store.
‫So we usually call that store,
‫but then from that store,
‫we can simply get the data that we want.
‫So let's say store.customer,
‫and so these names right here.
‫So the .customer is exactly the name
‫that we provided here.
‫And so that's also the name
‫that we saw earlier here in our console.logs
‫when we were checking out the entire state.
‫So if we change this here, for example,
‫to a then here that would also be called store.a, okay?
‫And then we can just store that
‫into any variable that we want.
‫So, let's see.
‫And yeah, there it is.
‫Now, it is, of course, still empty
‫because that is the default state,
‫and we didn't add any customer yet,
‫but we can still already see that this is working.
‫Now, let's actually just get the customer's name
‫here from the store
‫and we should really do as much data manipulation,
‫so to say, here in this selector function.
‫So, if we want to get only the full name,
‫then we should write that in here, so in this function,
‫and inside this function,
‫we can also do all other kinds of computations,
‫and we will see an example of that
‫in the next big application that we're gonna build.
‫For now, I will just grab the full name here
‫and then let's display the customer right here,
‫which, again, will be empty here.
‫So welcome no one basically,
‫but yeah, we'll fix that in a minute.
‫So for now, what I want you to understand
‫is that this useSelector basically creates a subscription
‫to the store.
‫And so just like we are already used to,
‫whenever the store changes,
‫then this component that is subscribed
‫to that store will re-render.
‫Now, behind the scenes,
‫Redux also implements some performance optimizations
‫which are probably similar to the ones
‫that we talked about earlier in the Context API.
‫But what matters is that the mechanism here is similar
‫to the one that we already know about.
‫So the state in the store changes,
‫and so the component re-renders.
‫Okay, and so next up,
‫it is actually time to create our first customer.
‫And so in the next video,
‫we will learn how to dispatch actions to the store.