At this point we've got a good idea of how the contest system works.
But you might be a little bit disappointed with my description of context.
And why is that.
Well when context was first released a lot of people said hey we don't have to use redux anymore.
A lot of people saw the contest system as an alternative way of maintaining state and delivering information
to various components inside of a typical re-act application.
Now I don't know about you but as I look at the contest system as we have described it so far I don't
really see a replacement to redux.
Well why is that.
Well keep in mind what redux really does for us redux through the redux library and re-act redux together
provides a way to distribute data to various components throughout our Complan hierarchy.
It gives us a way to centralize all of our data inside of a common store.
And it also provides some means of changing data inside that store by dispatching action creators and
producers and all that kind of good stuff.
When I look at the context system as we've described it so far I don't really see a lot of that functionality
with the context system by itself.
All we really have is a way to distribute data to various components inside of our application.
A way to communicate from a parent component down to each child.
So in this video we're going to start to explore how we can somehow replace redux with the context system
even though it appears that the contex system is far more limited than redux is.
Now I want you to understand that in these coming videos as we start to discuss how to use context as
replays to as a replacement to redux I am not at all advocating dropping redux from any application.
I'm going to tell you how we can use context to replace redux solely that you can understand for your
own personal benefit.
Personally I think that using redux is a tremendous boon to just about every application every non-trivial
application are going to put together and will have a kind of longer discussion on why I feel that and
a little bit.
But right now I just want to give you some ideas on how we can use context in place of redux now as
a first step here.
We're going to do a little refactor to our application that is going to lead us come in more naturally
to understanding how to use context to maintain state inside of a re-act application.
So the first little refactor we're going to do here is to build a separate component called the language
selector component.
This language selector is going to essentially just be the language selector that you see at the top
of the screen right here.
It's going to have a div that says select a language and then the two flags.
Whenever a user clicks on one of those flags we're going to invoke a callback passed from the app component
called on language change.
So we're going to call that callback from the language selector component that's still going to update
some state inside of our app dot J J.S. component where the app component which is still going to communicate
that information down to our field and our button.
Just the same as before.
So right now we're just doing a refactor to extract that selector into a separate component.
And once we do that we'll then have a deeper discussion in how we're going to get context to replace
redux.
All right let's get to it inside of my code editor.
I can't find my complaints directory and I'll make a new file called language selector.
Yes.
And then inside if you're going to create a class based component so I will import re-act from react
or make a class of language selector that extends re-act component.
I'll place my render method and then my export default language selector at the bottom.
Now for the actual markup or GSX that we're going to return from the render method we're just going
to go back over to the uptalk J.S. file.
I'm going to find the div that says select a language and has the two flags inside of it.
I'm going to cut that entire div out.
And then I'll go back over to my render method put down my return and paste the div inside there like
so.
OK so now whenever a user clicks on one of these flags as rendered by the language selector we're going
to try to call this start on language change.
This method does not exist inside the language selector.
Like I said we're going to pass down a prop called on language change that allows language selector
to tell the app component any time that the user clicks on a flag.
So inside of my language selector I'm going to change this not only was changed to be this props on
language when language change for both instances right here and right here then save this file I'll
go back over to the apt G-S file and I'm going to import language selector at the top
once I've got that imported I'll then render it
and I'm going to make sure that I pass a prop into it called on language change and to that prop I'm
going to pass the on language change function that we put together right there.
So this dot on language change.
All right.
So everything we've done so far nothing crazy.
We just extracted a little bit of logic to a separate component.
Any time a user selects the language now it's going to invoke this callback which is still going to
update our language just the same as before.
That's going to give us a new piece of state of language that's going to re render our entire component.
And that's going to get a new value into our language context provider.
So now going to save both these files and then flip back over to my application and just test it out
really quickly.
And as you can see I still have the same functionality as I had before.
OK.
So we've now done this will refactor here.
So let's take another quick pause.
When we come back the next section we're going to continue investigating this idea of replacing redux
with the context system.