React Context & Hooks Tutorial #20 - Adding a Reducer

Key Takeaways

okay they're my friends so now we know a little bit about what a reducer is let's try making one for this application so the first thing I'm gonna do is create a new folder called reducers and put my reducer inside here now you don't have to do this again I'm just trying to keep things organized here so let me now create a new file and I'm gonna call this book reducer ojs so then inside this reduce of what do we want to do well we want to export something and that's something is going to be a function that's what I reduce is at the end of the day it reduces all of our different functions that we have to manipulate the state in our case just these two and it reduces it into a single function so let's say export and then Const and it's going to be called book reducer set it equal to a function it takes in those two parameters remember the state first then the action and inside this reducer is why the magic happens okay so remember we need to check what the action type is because whenever we dispatch an action it just goes straight to this reducer we need to check the type of that action before we manipulate the state so let's say switch and then we want to look at the action dot type now that could be something like add book or remove book either way we'll do a case for each one so case and that is going to be add book and it's coming practice just to keep these in capitals you could also store these in constants if you wished so you don't have to change them multiple times if you use them elsewhere but I'm just going to declare them there as is so inside this we're going to return a new value and this new value is going to be the new array of books so remember our books array is going to look something like this right and we want to take the current value of books which inside this reducer is represented by state these represent the books so what I could do is this and that's going to spread out all the different objects currently inside the books array so it grabs all of those and pops them inside this new array then we want to add a new one to this array so we've got different properties we've got the title that is going to be on the action object that we pass in then we'll have a property called book which will be an object the new book we want to add then on that will have two properties a title and an author we want the title in this case next we want the author so that is going to be action dot book dots author and then finally we also need an ID for this book and before we used UUID this library right here and we did that over here by invoking the function so let's cut this from here because we won't use this inside this file anymore and let's paste it over here inside this file instead like so okay so now we have that and we can call this function to generate a unique ID so now we have our first case done and if we were to dispatch an action with this type ad book and a new book object that we want to add to the state it will look here see this case and it will return this new data and this state will be returned then so that when we pass it down as a value over here then all the components consume in this context will see that updated state alright so that's the first case done the second case is going to be remove book so let's do that again in capitals remove book and inside here we're going to return a new value again and that new value is going to be a filtered array much like we did over here when we said book stop filter and in fact what I'll do is I'll just grab everything from here onwards and paste it over here this time we want to say state dot filter because remember state represents the books object that's that piece of State so we say state dot filter and for each item in that array we reference the item as book if the book ID is not equal to the action dot ID because when we send an action of this type remove book as the payload will send an ID property of the book we want to remove so now will only return true if those two IDs are not the same if they are the same then it's going to return false and remove that item from the array so it's now returning this you filtered array so that is pretty much the second one done now we also need a default catch-all so we'll just return state at the bottom here like so and that is our reducer done so we've created that reducer it's not doing anything yet but we've created it and now over here what we could do is import a new hook which is going to be use reducer and we're going to use that instead of you state now so we can delete you state get rid of that and then over here we can say use reducer instead of use state now remember we pass in two parameters here the first parameter is the reducer we want to use and that is going to be the book reduce it we just created so let's click that also imports it form it and the second argument is going to be the initial value of this piece of state now I previously set it to this but what I'd like to do now is just set it to an empty array to begin with so when you first load the application there's going to be no books on the reading list and then as we add them it will take those books okay now remember we get the books back but we also get a function called dispatch back right here so we'll take that function as well and now we can remove these functions over here because we no longer use them inside this component we use the book reducer instead and now what we need to do is remove these and instead pass down dispatch like that now if I save this then nothing is going to work in the application because we're trying to consume a context and use the different functions from that context in the different components if we look in book form for example we're trying to get Ad Buckner exists in this context we don't have that anymore because we just have the dispatch method so what I'd like to do now is instead get the dispatch from here instead and then when we go to add a new book instead of using add book we're going to use dispatch instead then in here we need to pass an action that we want to dispatch and that action is going have a type in this case we want to add a book so add book and then we also need to pass a payload that is going to be the book property which is an object again and we'll lower this on to the next line we want the title which is just the title we get or right here okay so we don't need to add title is title because they're both the same name we'll just do title and we also want the author so we'll pop that in there as well so this component is now updated we've got the dispatch method from the context and we're using that to add a book now let's do the same for removing one and that's in the book details so instead of removed book now we want dispatch and then down here where we call remove book instead we want to dispatch an action so let's delete this and instead say dispatch and place an action the type is going to be remove underscore book and then the payload is going to be an ID which will be just the book ID remember we have access to the book as a prop so now we're dispatching this type of action and if we save this then hopefully this should now still all work let me just refresh and you can see there's no books to begin with but if I say the way of Kings Brandon Sanderson and press ENTER then this still works it gets added to the list and removing it also works as well awesome so there we got my friends that is how we can use reduces to reduce all of our different functions which interact with the state into one single function and I think you'll find that this is much easier as you expand your application because now all your different state logic is in one place inside this book reducer and it makes this context file very lean as well because we don't have to do all of that manipulation right there so this is almost done now I just want to show you one more thing and that's how we can hook this application up to local storage in the browser so that when we refresh we don't lose any of that data it gets it from local storage and then it can save it as well when we add books so I'll show you that in the next video