In the last video we started talking about how we could replace redux with the contact system.
Now in general I do not recommend you always try to replace redux with context.
There are still tremendously good reasons to use redux inside of any non-trivial application.
And I will lay out some of those reasons later on inside the series of videos.
I'm only showing you how to make use of context in place of redux because this is kind of a really popular
topic in the community right now.
But again I do not personally recommend you do this.
All right.
So if you want to replace redux with the context system here are some of the big ticket items that we
will need to think about.
First off if we want to use context we'll need to have some way to deliver information to any arbitrary
component inside of our component hierarchy.
Now this box is in green right here because that is pretty much a solved problem.
This is what the context system is all about the context system is about sharing information with any
arbitrary component.
So this is not an issue when using contex.
One of the bigger issues is how we're going to be able to separate our view logic from business logic
when using context.
If you take a look at the AT-AT J.S. file right now this is a component that is very much Mitt Mixing
business logic with the logic.
We've got a single component that maintains the currently selected language.
And I would kind of argue this is somewhat like business logic inside the context of our application.
That component also has some display logic or logic in here as well it renders out a div at some given
class name and it renders out some child components as well.
So at present the outtalk G-S file is mixing view logic with business logic and ideally we would separate
those two types of code into different files.
Ideally In addition once we split out that business logic to some different file we need some way to
break that down into separate individual files.
This is really easy to do with redux remember with redox we create a separate file for each reducer
and we could easily do the same thing for our action creators as well.
So it's redux.
Both these problems are right here not an issue whatsoever.
So we need to think of some way to solve these issues using the context system.
All right so in the next diagram I'm going to show you one way of solving both these problems right
here.
This is not necessarily the best way of doing this or even the only way of doing it.
This is just one possible approach in which we might use the context system in place of redux.
All right so here's one way of doing this.
So my idea would be to extract all the business logic from the component and place it inside of a new
component called the language store the language store would essentially contain all of our business
logic related to the currently selected language.
It would also implement a provider so that it can share that information with different child components.
We would only create one language store component for our entire application so there would be essentially
a single source of truth about what the currently selected language is.
The language store would not only contain the currently selected language.
It would also implement a callback and make that callback available to any of our given components so
that any given opponent can change the currently selected language.
Zele see in this case we've got maybe a callback called like on language change so we would put that
function inside of our context object as well so that the language selector could access that callback
function and change the currently selected language non-language store itself will be a component it's
going to have a render method.
So you could say hey wait this thing is still dealing with some view logic but the render method inside
of here is going to be essentially just the provider by itself and no other elements are going to be
displayed inside of it.
If the language store is just about recording what the currently selected language is not giving us
the ability to change it.
All right.
So let's take a pause right here.
When we come back the next video will start implementing this language store component and we'll see
how this is going to isolate and remove our business logic from the app.
J.S. component so quick pause and I'll see you in just a moment.