‫In this lecture, I want to show you the old way.
‫So before React hooks existed
‫of connecting React components to the Redux store.
‫So let's open up the BalanceDisplay component
‫which is the one we still have to work on.
‫So the use selector and use dispatch hooks
‫that we have used up until this point
‫are the modern way of using Redux in React.
‫So before hooks existed, we had to use the Connect API
‫and you will still see this API in older code bases.
‫And so since I want to teach you all of Redux,
‫so both the modern and the old way,
‫let's use this old Connect API in this component
‫and I can immediately tell you that it's a lot worse.
‫So basically the way we usually used that API
‫was simply with the connect function right here.
‫So besides exporting those hooks that we have been using,
‫the React Redux library also exports that connect function.
‫And so this connect function takes in another function
‫which then in turn will return a new function
‫which will then accept our component as a new argument.
‫So that sounds really messy
‫but what matters is that this is what it looks like.
‫And that function that I just mentioned
‫is usually called mapStateToProps.
‫And what this does is exactly what the name says.
‫So basically this function here
‫receives the state object from the store.
‫And then here, all we have to do is to return an object
‫in which we can define the name of a prop
‫that our component should receive.
‫So that sounds confusing.
‫So I will just do it.
‫So let's say, we call it balance,
‫and then the value of this balance should be
‫state.account.balance.
‫So we could also take the entire state or just the account,
‫but all we want is really this balance.
‫And so now we pass that function here into connect.
‫All right, and so what's gonna happen then
‫is that this function here will return a new function.
‫And so this here will then become a function
‫and the balance display component
‫will then be the argument of that new function.
‫And so that new function is basically a new component.
‫And that new component will have the balance prop.
‫So just like this.
‫So we defined it as balance here,
‫and so then that's the name of the prop.
‫And so therefore, mapStateToProps.
‫So that's the name of the function right here.
‫And so what it does is to map some state
‫from our store to a prop,
‫so a prop in this component.
‫And so now we can use that balance right here to display it
‫and we pass it then first into this format currency function
‫that I already had provided here.
‫And so we get our $50.
‫Now for some reason,
‫sometimes this connection doesn't work in the beginning.
‫And so if that's the case for you,
‫so if your balance is not showing up there,
‫then just close the application.
‫So cancel it in the terminal and then restart it again,
‫and so that should fix it.
‫All right?
‫Now of course, it's not really important
‫to understand how this works
‫because you will not use this on your own.
‫This is just so that when you see this in the wild,
‫at least that you know what this does.
‫So again, before we had hooks,
‫this is the way we needed to do it
‫because there was no other way of getting the state
‫somehow into the component.
‫And so now if we deposit something here,
‫then that updates right there.
‫Okay, and this is actually all.
‫Now, in the next lecture,
‫we will take the complexity up a notch
‫by talking about Redux Middleware and Thunks,
‫which we can use for asynchronous operations,
‫like data fetching.
‫So that's gonna be pretty exciting.
‫And so let's now move on.