In the last video we went through a pretty nasty refactor.
Again we're doing this refactor because setting up all this context stuff is always going to be just
about identical no matter what type of resource we are dealing with an array of objects in array numbers
array of strings just a string just a number.
It really doesn't matter.
Everything is always going to be just about identical.
So we've now created this create data context function right here that's going to do a lot of setup
for us automatically.
So now we can really just focus on the parts that matter like actually handling some data changing that
data and that's pretty much it.
And there's one last thing we have to do to fix all this stuff up.
Remember right now we are passing in a function right here that describes how we want to change our
data.
We're passing that into the second argument to create data contexts.
This function refers to our dispatch but the dispatch isn't available inside this file.
Instead that dispatch function is only created over here inside of our provider component so we're just
gonna add in a little bit of fancy code to essentially make sure that this add blog post function right
here gets access to dispatch.
So I would kind of left this half to last because it's going to be just kind of a nasty little thing
one more nasty refactor and then we're all done.
So here's we're gonna do.
Again add blog post needs to have access to that dispatch function that's how we change our state.
So we're gonna make sure that we call this function right here with The Dispatch.
Function and then inside this thing rather than just calling dispatch right away I'm going to instead
return a new function and inside that new function I'm going to call dispatch.
So I know this looks a bit nasty but let's save this.
We're going to flip back over to our create data context file and we're gonna add in a little bit of
code that's gonna essentially kind of solve or make this a little bit more clear as to what's going
on as a quick reminder at blog post right here is being provided inside of an object to the second argument
of create data context.
Back inside of create data context there's that object right there that's gonna have all of our different
action functions.
And remember those action functions essentially describe how we're going to change our state object.
They call dispatch so actions I'm going to add in a new line after we set up or call use reduce right
here actions is going to be an object that might have a key of like add blog post and that's going to
be a function that expects to be called with dispatch and then inside there we return a function that's
going to actually do something.
So here's the idea we're going to loop through that actions object for every key in this case like just
add a blog post we're gonna take that function right there we're going to call it with the dispatch
argument and that's going to give us back that function right there.
And that function right there is what we're going to pass on down into our value prop right here.
And it's essentially going to let all of our child components make changes to our state object OK so
let's try this out.
I know this is like just nasty stuff but I just want to show you really interesting code here that's
pretty much what it comes down to.
So we need to loop through this object for every key we're going to call that function with the dispatch
function and that's going to return a function that were then going to pass down on the value prop so
to do so I'm going to make an object right here they'll call bound actions the naming there indicates
Look the reason I'm calling it bound actions can indicate that we processed all these actions and they
are bound to this copy of dispatch so then to iterate through that object I'll use a for in loop so
I'll say for let key in actions so inside this loop key will be equal to first add blog post so going
to use that key property.
I'll look at bound actions and I'm going to say at key.
So that's essentially in the first case it would be bound actions dot add blog posts like so so say
bound actions at key is going to be actions at key so actions at key right there is going to return
or give us a reference reference to that function right there we're going to call that function with
dispatch and that's the trick so we're going to loop through just like I said we're gonna take this
function we're gonna call it with dispatch that's gonna give us back our function right here.
That can now safely refer to the dispatch function and then we're gonna set that whole thing on the
bound actions.
Object and then finally we're gonna take that bound actions object we're gonna pass it down on our value
prop.
So in addition to state we're also going to pass down actions actually you know let's just spread that
entire object and that's all a bit easier.
So I'll say dot dot dot bound actions like so now our value prop right here that we share with all the
rest of our components is still going to have the ad blog post function that it had before but now it's
got like a bunch of fancy code around it to essentially make sure that it gets called with that dispatch
function and has the ability to actually change our state.
Again I'm to say it for like the third or fourth time I know this is some nasty stuff but I just want
to show you like some really high level stuff at how fancy we can get and kind of elegant when it comes
to dealing with all this context stuff OK.
So that's very much the end of nasty stuff at this point you're sitting there like Steven I hate you
this doesn't make any sense.
We're all done.
That's it.
We're done.
So now everything's set up.
Now the last thing we're going to do.
We're going to fix a couple of different references.
So right now our blog context file is now exporting to variables of capital C context and provider.
So we just have to go round to a couple of different files and make sure that we have the same variable
names being referred to.
So first off back inside of index screen we have a import from that blog context and we are importing
just the blog context variable.
There is no longer a blog context variable.
Instead we're exporting to different named variables.
So we're gonna place our curly braces and the only one out of those two context and provider that we
care about inside this file is capital C context so we can pass in capital C context to use context
right there.
Like so now if we ever have two different values of context like maybe we have one that's coming from
blog context or another from a totally different source of data like image contexts or something like
that we would have two different identically named variables to solve that we can use a little bit of
syntax right here so we can say context as and then rename that variable so we could call it like blog
context after all and then call the second one as image context and so we can still refer to these different
things appropriately even though they are technically named identically.
But in this case I'm just gonna leave it as capital C context.
Now the other thing we're going to fix up really quickly.
We don't have a data variable anymore.
Remember we just took that entire state object that we got back and we called it simply state as opposed
to data.
So rather than D structuring off data we're going to restructure off state and make sure we pass state
into our flat list.
There we go.
And then finally inside of our apt j ust file we are importing blog provider from blog context.
We don't have a blog provider variable anymore.
Instead we are calling it simply provider.
Once again if we needed to we could rename this on the fly to something like log provider if we needed
to.
But in this case we don't.
Now I can just update my j ASX down here with provider instead and that's it.
I apologize somewhat I know this is nasty stuff nasty nasty but unfortunately if you don't want to use
redux This is what we have to do.
And as I mentioned earlier we are not gonna use redux too much inside this course or at least in this
application.
And so we were going to essentially build redux from scratch to some degree and that's kind of vaguely
what we have now done.
We haven't really rebuilt all of redux but we've definitely kind of added in some functionally functionality
around some different portions of it.
OK.
So all the refactor is done so now we can finally test it.
I'm gonna go back over here again to tap on ADD post and I still see my list of blog posts as before.
So effectively no big change but now we've got this great function called create data context.
This is like total magic right here.
Any time that we need to add in some kind of new resource.
So images comments whatever else we're gonna create another one of these context files all we have to
do to find the reducer define some functions they'll be called with dispatch.
And from those we're going to return a function that's going to dispatch an action that's going to attempt
to modify our state in some way.
We then call create data contexts and that's pretty much it.
Game over nothing else required.
So this is actually a really elegant solution anytime we need to add in another type of resource we're
gonna have such an easy time.
Now unfortunately on the application working on right now we only have this blog resource so it's not
super useful here because we're just creating this one context.
But on future applications we put together if we were going to have multiple different types of data
it's going to be really easy to work with.
All right.
Now we're all done.
Another quick pause right here and we'll continue in the next video.