Complete React Tutorial (& Redux) #38 - Store Subscriptions

Key Takeaways

or rather than so if we take a quick look at this diagram again then you're going to notice we've done most of the steps here we've created a store and we've created a reducer which is passed into that store we've also dispatched an action right here which is going into the reducer the reducer is taking that action and then updating the state in the store so the only real thing left to do is to subscribe to the store and then react to changes in the store now normally at what we do is do that in a component in react but since we don't have any components here I'll just do a simple subscription and log it to the console whenever we get a change but it will be slightly different when we work with components but the basic idea behind it is the same we want to listen for changes to the store and then react to those changes so then let's set up these subscriptions so down here underneath the store what we're going to do is say store dots subscribe and this is a function and it takes a function as a parameter and this function is get a fire every time the state is changed so every time that happens let's console.log state update it and then underneath that will do another console log and we'll logout the state now how do we access the states we can't just say state because that's the thing that's just passed in here and if we say initial state then we're just going to grab this thing right here we want the current state of the store which has been updated so we can get that by saying store don't get States and this is a function and that's going to get the state for us and love that's in the console now all right so if we save this and run it let's see what is produced in the console over here all right so now we see we get that state which is two dews by milk so this is working we've dispatched the action right here like this and it's passed into the reducer we've updated the state we've passed back a new state object and then because the state has changed and we subscribe to that then it's firing this function over here and it's logging this message and the state over here vault we've got a problem in the state here is an object with just one property - duze so we have two properties - dues and posts even though this one's still empty it should still be there now the problem lies here when we return an object this is the new state object so we've overridden the old one in essence so we said okay we no longer want posts here right so this is different from when we're setting the state in a react component whereby we only need to pass through the thing that we update and it doesn't touch the rest in this case what we need to do is pass in even the stuff that we don't want to change so we could say posts is this an empty array still and then sadducees update it we could do that but what if you have many different properties on here well you don't want to tap them all out for each individual check so instead what you can do is use the spread operator of the state which is going to grab everything in the current state so both of these things and it's going to spread them in here then it's gonna take their - dues and actually override that so we might be doing to do twice here but the second one is the one that counts the last one in the chain that overrides the first one okay so this way we're still placing the posts in the state object that we returned but we're also overriding the - dues so if we save this again and press run this should work fingers crossed and voila we get it right there all right there so let's now try dispatching another couple of actions so I'm gonna go down here I'm gonna get rid of these two things and what I'm gonna do is just paste in a couple of actions so stored up dispatch and then I'm passing the action directly into the dispatch right here so the first one is absolu by milk the same as before the second one is add to do again and this time sleep some more now we'll do a third one so I'll just copy one of these and this time it's gonna be add post and it's gonna be egg hunt with Yoshi all right so now we need to perform this check inside the reducer over here so copy this and we want to paste it down below here and I'm going to say if action type is now add post then we want to do something different don't we we want to return an object which takes the current state but this time we want to update the posts so let's do that and we want to use the spread operator on the current posts and then also get the post data and let's update that on the action down here because that's going to be a post and not to do now so let's save this now I'm going to clear the console over here save it and see if this works so we'll run this and we should get a few logs out here the first one we've added it to do the second one we've added a new to-do and the third one we've added a post so that's the basics of Redux right there just to go through the diagram again we dispatch an action to change the state and that is passed into the reducer the reducer takes that action checks what type of action it is and then updates the state accordingly with whatever day two it's passed then we can subscribe to the store and react to that in this case we're just logging something to the console but when we come to work with react and redox we're going to attach that data to the props of this component so we can use them and we're going to see that in the coming videos