We've now got a perfectly working version of our blog provider that's now using our use reducer hook
right here and the actual blog reducer that we just created as well.
Now once again just like our use state example this is a hundred percent valid code.
What we have inside of here works 100 percent just fine.
And if we wanted to we could probably build out the rest of our application without any issue whatsoever
nonetheless.
We're going to add in one more refactor here.
This is still kind of like an optional refactor just like the use reducer stuff was but this refactor
that we're about to do is going to add in support for some advance patterns so we're going to need in
some later applications we put together.
So again we could pause right here.
We could make use of all this code for the entire application we're trying to build but we're going
to do another refactor just to set ourselves up for some future success.
So let me first begin by telling you why we're going to do this refactor.
It's really simple.
Right now we have a single file called blog context inside of application and this file is all about
managing blog posts.
It's a hundred percent reasonable to think that at some point time we might have to add in some additional
type of resource inside of application.
So maybe a list of comments or a list of images to show to the user or who knows something else related
to the application we're putting together very frequently.
We have an app that has multiple types of data flowing through it not just one single type like our
list of blog posts we have here.
So chances are that at some point in time we're going to have to eventually create another context file
inside of our context directory that's going to have some code almost identical to what you see inside
of here.
Think about it in just about every case if we want to add in some additional type of resource we're
gonna have to create another context variable.
We'll make another reducer.
We'll create another provider component like this one right here that calls the same use reducer and
then shows the same provider thing inside there.
Essentially it's going to be all duplicate code.
You can even imagine if we wanted to change this example right here to work with say a counter example
like we wanted to count some variable that goes up and down we would end up with just about identical
code inside there.
So the refactor that we're going to do is going to make a function that's going to essentially automate
the process of creating and sending up a lot of the stuff that we did inside of here will then be able
to use that function to add in new types of resources to our application very easily and all we should
have to do is create a new actual reducer function create a couple helper functions that describe how
we're going to dispatch some action object and then maybe also provide the only other thing that really
gets customized is that array right there are that initial state.
So that's pretty much it.
So to get started we're going to open up our context directory and say they're going to make a new file
called create data context dot J.S. Now you'll notice that I created this file with a lowercase c and
create right there.
That's because we're going to eventually export a plane function from this file.
And usually by convention anytime we export a plane function we usually label it with a lowercase leading
character.
OK.
So inside of here we're gonna write out a little bit of code that's going to essentially automate creating
all this stuff we just did inside of blog context so we're gonna write out a little bit of code inside
of here that's going to look maybe a little bit mysterious but again we're just doing the same thing
we did over here in an automated fashion so to get started I'm going to first import react and use reducer
run react after that.
I'm going to export default a function and into this function we're going to eventually pass the three
things that actually need to be customized anytime that we create a context like I said there are only
a couple things inside of here that need to be changed if we ever wanted to create another resource.
The first thing we would have to change would be the reducer function itself.
So whenever we call this function that's going to create a new data context for us automatically going
to receive a first argument that's going to be our reducer function.
The second argument or the second thing that's going to change anytime that we create another type of
resource would be the different helper functions like this one right here that contains some kind of
dispatch inside of it so I'm going to expect that I'm also going to receive a second argument to this
function that I'll call actions.
This is going to eventually be an object that has all these different callback functions we want to
make available to our child components so they can somehow dispatch an action and change our state.
And then finally there's only one other thing inside of blog context that needs to be customized and
that is the initial state that we call use reducer with.
So in our case we had a initial state of an empty array but we could very easily have other types of
initial state like a empty object or a number or a string or just about anything else.
So the last argument to our create data context function will be some initial state like so OK so now
that we've got these three things that are gonna be customized for every different piece of context
we ever create all these different types of resources.
We're not going to create two things inside this function and export them or simply return them.
Sorry.
So the first thing we're going to create inside of here is going to be our context object.
So going to create a new variable called context
like so so remember back inside a blog context right there we created our blog context variable if we
created a different type of resource inside of our app like say again comments or images or something
like that.
Nothing about that line of code right there is going to really change except for the name of the variable.
So chances are if we ever need to create a different type of resource we're going have to call create
context and it doesn't really matter what we call it then after that we're going to set up the provider
function.
So this is going to be like the same function that we created back over inside a blog context the one
called blog provider.
So this thing is going to take an argument for me a prop object that has a children property and then
inside of here we're going to essentially write out all the same exact code that we had inside of our
other blog provider that we just wrote.
But it's just going to use some very generic variable names so first I'm going to create my are going
to call use reducer when we call user reducer.
We're gonna get back our state and dispatch so I call use reducer.
And when we call that we're going to pass in the reducer that we call added into this function and then
second argument will be that initial state
then after that we're going to ignore anything having to do with actions like we did back over here
right here.
And instead we're just going to focus on returning our J.S. sex for right now so the J.S. sex that we're
going to return from this new provider component will be return context dot provider gonna open up that
tag like so and inside of it I will return children and then remember any data that we want to share
with the rest of our application is going to be available on the value prop so remember in this case
right here what we're doing here we're trying to make some very arbitrary version of all this stuff
that can work with different types of resources.
So chances are whenever we add in this value prop right here we want to share our piece of state in
some way to change that piece of state with all of our different child components exactly as we did
back over inside of blog context.
So on my value prop right here I'm going to add in an object that has a state property that is whatever
our current state is.
As usual I've got an identical key value pair right here so I'll condense it down to state like so Okay
that looks good.
And now finally I'm going to ignore like that action stuff right now.
The last thing I'm going to do from the overall export default function right here.
So I'm inside of just that last set of curly braces.
And from here I'm going to return the context object that we just created.
It's that one right there in the provider component we just created as well like so OK.
So just to clarify what we just did right here we made a reusable function that we can use several times
inside of application to automate the process of setting up this context stuff and setting up this provider
as well.
We still have to come back here and add in the ability to have some action objects which remember are
going to ultimately call dispatch but we'll do that in just a second.
First let's make sure that we can make use of this create data context function to automate the process
of creating our blog context which we created over here.
So rather than having to go through this repetitive process of calling create context and then setting
up the provider and all this stuff that we would have to do with each additional resource we added in
we can instead just make use of this create data context function that we just created to back inside
a blog context at the very top I'm going to import create data context from create data context and
then inside of here we can go through and delete all the code that we're not making use of anymore or
at least I should say got extracted to the create data context function.
So we no longer have to create any context on our own because create data context takes care of that
for us.
It's gonna delete that.
Then inside of blog provider right here we don't need the entire blog provider anymore.
Instead the only thing we need inside of here is that one function we defined that's going to eventually
change our state.
So I'm going to copy or so we cut that out paste it outside that function and now we can delete the
entire blog provider because everything inside of here is always going to look almost identical no matter
what type of resource we are dealing with.
So I can now delete that as well.
And then finally we don't really need to export our blog context anymore because that's not even created
inside of here.
So I can delete the export default.
All right.
Now here's the magic part.
At the very bottom we're going to do an export contest and we're gonna do structure of whatever create
data context back over here returns.
So we're going to d structure out context and provider.
So going to d structure out context and provider and that's going to come from calling create data context
and we're going to put in as our first argument our reducer.
So that's blog producer
then we're gonna put in an object that contains all the different actions that we want to have.
In that case that's gonna be our ad blog post function right here.
I'm gonna put that in inside of a object add blog post and then finally as the third argument I'm going
to get a new line inside of here just makes this a little bit more legible so there's my new line.
And then the third argument is going to be our initial default state value which once again is going
to be just an empty array like so OK so that is the create data context function in action.
So now what we have inside this file is tremendously reduced compared to what we had before.
Again I can't say enough.
Everything we had around creating that context object in setting up that provider.
It's all going to be identical no matter what kind of data we are dealing with.
And that's why we extracted all that stuff out to a separate helper file.
So now anytime we want to add in some new type of resource inside our application all we have to do
is create like a new context file we're gonna create our reducer we're going to create the different
functions that are going to dispatch an action that's going to modify our reducer and then finally we're
going to call create data context passenger reducer pass an object with all those different actions
passin our default state and it's going to give back to us our context object and the provider which
is a react component that makes all of our data available to something else inside of application.
So I think this looks a lot better than what we have before as one last change inside of here.
We can remove that import scene at the very top because we don't have any J.S. sex inside here.
Now I know the refactor we just did is a little bit nasty and probably a little bit confusing and we're
not even done with it.
So let's just take a quick pause.
We come back in the next video we're going to wrap up this refactor and once again explain exactly what
we did inside of here.
So see you in just a minute.