All right.
My friends in this video we're gonna start to refactor our blog provider to use the use reducer hook.
I'm going to first begin by giving you a quick reminder on how that thing works.
So I pulled on the screen here when a previous project that we worked on called the Counter screen component.
So inside of our counter screen we had a use reducer call right here and we had two buttons that we
displayed.
So two ways in which we could change our state anytime a user tapped on one of these two buttons.
We dispatched in action remember an action is an object that describes how we want to change our current
state variable.
So in this case right here we dispatched an action with a type of increment and we all set a payload
property on there as well that described how much we wanted to increment our counter by whenever a user
typed on decreased.
We had a type of decrement and we had also a payload property that described how much we wanted to change
the counter by as well.
So whenever we want to make a change to our state we always call that dispatch function and we always
passed in an object.
Remember this object right here.
It could have any property we wanted to have on it.
But I told you specifically that community convention is to have a type property that describes how
we're trying to change our state and a payload that has some information related to exactly what we're
trying to change.
We then also created our reducer function the reducer function would be called automatically by react
the first argument would be our state variable.
So in our case for this list of blog posts our state variable is probably going to be an array of blog
posts.
Then the second argument was gonna be the action object that we had previously dispatch like the one
we were just talking about right there so inside of our reducer function we set up a switch statement
and we took a look at what the actions type was and an inside of each of these different cases we had
added in a little bit of code to update our state in some very particular way.
And then remember the key to the reducer function was that no matter what we always returned a new value
to be used as our state object OK.
So that's a quick reminder on how use reducer works.
So now with that in mind let's start to update our blog context file.
We're gonna make sure that we use the use reducer thing instead of you state.
So to get started inside a blog context I'm going to first change the you state import to use reducer
instead then write above my function my blog provider right here I'm going to create a new function
called simply about like blog reducer let's give it a meaningful name that's gonna be my reducer function
will add in some code to that in just a minute but let's first update our blog provider.
So inside my blog provider I'm going to update the you state call to instead be used reducer and then
remember the first argument is going to be the reducer to use.
So that's blog producer for us and then the second argument will be our initial state object in this
case we're going to leave it as an array.
So by default we do not have any blog posts at all then out of that we get back our state object and
the dispatch function.
Going to update the name of that second argument or to me the second element Sy that I to dispatch like
so now if we wanted to we could update blog posts right here we could update the name to state instead.
It's totally up to you.
In my case I'm just going to leave it as blog post just to remind myself that hey this really is my
list a blog post right here and finally I'm going to delete the AG blog post function and I'm going
to remove that from the value prop down here as well.
The only reason I just deleted that is that we need to eventually make use of dispatch to change our
states rather than calling add blog post.
So we're gonna make sure that we eventually make use of dispatch inside of here.
But first let's finish setting up our actual reducer okay.
So reducer member gets two arguments.
Usually we call them states and action once again if you want to.
I apologize for that.
Once again if you want to rather than calling it state we could call it blog posts but usually by convention
we just call it state so then inside of here we'll set up our switch statement.
We'll do a switchover action type.
So we're going to look at whatever type action has and depending upon its type we're going to do some
different operation to operate on our state object so we need to imagine or kind of make an assumption
about the different types that we're going to have inside of application.
I'm going to just imagine are going to plan on having a type called Ad blog post.
We haven't created that yet.
We're not dispatching any action with that type but I'm going to assume that I'm going to eventually
have it so then inside of here we're going to update our state object which remembers the array of blog
posts and add in some new blog post.
We're then going to return the resulting object that's going to essentially be the exact same code that
we wrote inside of.
Add blog posts just a moment ago.
So we're going to return a new array that's going to have all the current values of state.
So remember that means take all the current blog posts we have and add them into this new array and
then immediately after that we're going to add in our new blog post.
So I'll give this thing a title once again of a back tick.
So a template string and I'll say blog post number then dollar sign.
Curly braces and I'll do state DOT length plus 1.
Then I'll also handle after that my default case.
So if we for some reason get an action without any type that is matched by this case statement we're
gonna make sure that no matter what we always return some state value.
So I will put in my default case right here and I'll say return state like so OK.
So that's pretty much it for our reducer right now so now we can go back down to our blog provider and
we're going to create another helper function right here once again called Ad blog post.
I'm gonna pass this helper function down into my value prop so that my index screen can very easily
dispatch in action to add in a new blog post.
Now you'll recall that I just said like two seconds ago pack inside this diagram that creating a separate
function for each operation would be really awkward.
So I'm kind of going directly against that by adding this function back in you're going to see very
quickly that we're going to eventually add in a little bit of code that's going to essentially generate
all these different ways of changing our state automatically for us.
So this is just a temporary thing right here.
OK.
So inside of here anytime someone calls add blog post we're going to dispatch an action object and this
thing is going to have a type of ADD blog post that exact string right there.
So I'll put in add blog post and now once again I'm gonna make sure that I pass down add blog posts
in my value prop to make sure that it gets communicated over 20 next screen.
So I'll add an add blog post.
Once again that's pretty much it OK.
So at this point one more once again just a quick reminder.
I know it's annoying when I repeat things.
Nonetheless this is some pretty confusing stuff.
So here's what's gonna go on behind the scenes when our application is first rendered.
We're gonna have no blog posts whatsoever because our initial state is an empty array.
We're then going to set up our provider.
We're going to render our entire application and anything that tries to get some information from our
blog post provider is going to be given our current list of blog posts and a callback function that
will dispatch an action of type at blog post whenever someone calls add blog post.
We're going to run this function right here.
That's going to call dispatch.
Remember that's the function we use to actually modify our state.
We're going to call it with an object that has a type of ad blog post.
So that's going to run this function right here.
React is gonna call this function automatically for us.
The first argument will be our current list of blog posts.
The second argument will be whatever action we dispatch.
So in this case that object right there we're going to look at the action type property if it is equal
to add blog post we're going to return this updated state object or in this case updated state array
that has a new blog post inside of it when we return some information from blog reducer that's going
to cause our blog provider to automatically re render just in the same way as the U state Hook did as
well so our blog provider is going to re render we're going to get our new state variable or our new
list of blog post right here that was returned from our reducer so blog post is now going to be an array
with one object inside of it.
We're then going to re render the rest of our application.
We're going to eventually in that process re render index screen when index screen is re rendered.
It's going to see the new value of blog post right here and it's then going to take that new value use
it inside the flat list and render out the new list of blog posts and that's it.
That's the entire process.
So let's save this and test it once again and I'll tap and sure enough add blog post 1 2 3 4 5 and so
on and I'll do a quick test on Android as well.
Yep works over there to OK.
So functionally what we have right here is 100 percent identical to the used state case that we had
before but now we can very easily add an additional case statements to this thing and start to modify
our list of blog posts in some additional ways.
In addition we're going to eventually figure out a really clever way to avoid having to put in this
had a blog post function right here because remember I had just said two seconds ago that adding in
all those separate callback functions was a little bit of a pain so quick pause right here.
We're gonna do a little bit more refactor in the next video.