And once we're familiar with our API now, I'd want to set up the general structure for smart use reducer
and in the process we'll talk about all of these suckers as well, essentially why we're importing some
variables from the actions.
And I'm going to start by setting up, of course, my use reducer.
So I already imported from react the errors and then somewhere in the app provider and my component
body, I'm going to go with CONSED and then remember, we're getting two values.
We're getting a state and we also have a dispatch function and that is equal to user producer.
And then we need to pass in two things.
We need to pass in a reduced function, which essentially is going to be responsible for setting up
our state because of course, all the changes that will apply to our state are going to be done in reducer.
And then also I would want to pass in initial state, which of course, by default is just going to
be empty object.
So when I have the user user, we pass in reducer function, something that will set up a little bit
later, meaning we have the file and everything, but there's really no logic in there.
And then we're going to go with initial state.
So these are two things that we would want to set up.
And then of course, we'll set up the Futch function.
But for the time being, I just want to worry about setting up a loading like other API project.
There's going to be a loading and unloading is going to be displayed, of course, in the storage.
So in the stories component, if we're loading, then we'll show the spinner.
By the way, if you want to see it, check it out, click, click, click and notice you're going to
be getting that spinner.
And then once we've got our data, then, of course, I display the storage.
But again, the moment we just worry about the loading, because in the process, I wouldn't want to
talk about why we are setting up these actions as variables.
So let's start over here or we're going to go with constant fetch and storage.
So and that is equal to my async.
Eventually I'll pass in the URL.
But since I only care about loading right now, I'll just leave it empty when I invoke it in my usufruct.
So that is good.
And I would want to dispatch an action.
Remember, if we wanted to change anything in the state, we always needed to do that using this patch.
So we have this over here and then in this patch we pass in the object and what was a must and the object
was a type property.
And here for the time being, I'm just going to go set and then loading, like so said, loading, and
eventually I'm going to do something in reducer when it comes to set loading.
So that's a start.
And then I would want to go with my usufruct.
So when my uploads, I have a callback function and what I would want to do is simply invoke fetch and
stories, so I'm going to invoke it.
And of course, that is going to happen when my app loads.
So now the next step is heading over to producer and handle that loading.
Now, before I do that, though, in initial state, of course, I would want to set up that property.
I would want to go with is loading and I would set it equal to Luxo.
So part of the same.
And then, of course, where I have the value now, I would want to pass in my state.
So I'm going to go here back to just Strickland.
So Double Curley's and then I go with State.
So pass in all the properties that are coming back from, use a producer from the state and the user
user.
And then as far as initial state, this is my object.
So hopefully that is clear.
And of course before I do anything in the reducer, don't worry functionalities coming up in the storage
I would want to import is loading from my global context.
And then if I'm loading, I don't want to display loading.
If not, then I would want to display this storage component.
Now, the problem right now is that of course, in the app, Jass are on display, all of them search
form stories and buttons.
So my apologies.
I said we're going to be going to reducer.
But in fact, there's a few other things that we would need to do.
First, don't worry, functionality is coming up.
So in the app, just.
I'm going to go back to the fragment, so and then we'll type three components, we're going to look
for search form, we're going to look for the buttons, which at the moment has nothing in there.
And we're going to go with our stories.
So these are the three components we would want to render.
And of course, at the moment, our work is going to be in the storage component.
So we navigate their.
And we already have used global context, so I'm importing the hook that provides my context and then
I would want to get it loaded on because I pass it and I have not that and then state.
So if I'm loading, I would want to display the spinner.
And then once I'm done loading, I will display all my stories, which at the moment are not there.
I just worry about the loading.
That's the initial setup.
So in the stories, we're going to go here with const.
And then since I know that I'm passing the state, I'm just going to go with is loading, and that is
equal to use global context.
I invoke it and now it's set up multiple times.
So if I'm loading, then I would want to play with the class loading.
And if I'm not loading for the time being, I'm just going to display this heading to the front loading
turn and I'm there and the class name is loading.
So and if I'm not loading, then of course I'm going to display my story's component.
Let me refresh.
And at the moment I don't see anything.
Let me go here.
Here's the bigger screen.
And let's see, maybe I messed it up some more.
So I have my console here and not just see here.
What is the value for is loading is loading so online as far as the value, it is true in the beginning
and then it is on the phone.
Why?
Well, because I already dispatched the action.
So this is good.
I'm loading by default and since I'm dispatching here set loading.
Of course, it goes back to the on the fine because I'm not doing anything in the register.
So now finally, let's navigate to reducer and then let's jog your memory of where in the reducer we
passed in two things we passed in state as well as the action.
So what is the current state right before the update and then what action?
Our passing.
So what I would want to do with my state and our case, we have set loading.
Correct.
And if you remember previous projects, we did something like this where we went, what if an action
type and then some kind of result.
Correct.
So some kind of action, whether that was at an increasing item, decreasing item deleting or whatever.
And we can definitely do it this way.
But there's also another popular way of how to set us up using switch again.
Please keep in mind the functionality won't change is just different.
People have different preferences and some people prefer using switch.
And since I would want to show you how to work with switch instead of a bunch of statements, that's
why in this project will you switch again?
Functionality won't change just the setup that we're going to use and instead of using the safe.
I'm going to go here with a switch and then I'm looking for action and then type, so what type of action
I would want to do.
And then as far as the switch, the syntax is following where we go with case and then whatever is the
case.
So in our case, what is the case?
Well, it is set.
And again, these need to match.
If I have a case for self-loading, of course, when I dispatch, I also need to call this set loading.
By the way, this is where our variables are going to come into play.
And as far as functionality in this case, if I'm loading, then I would want to set up the column.
And then I'm going to go with a return and then that state, because, of course, I would want to return
previous values and we're going to go what is loading?
And of course, since I'm setting up the loading our turn this astro, at the moment, there are no
different values in the initial state, but eventually, of course, they're are going to be there.
And that's why I'll say that about state.
So use the spirit operator, get all the values and then change only is loading.
And what I also would want to do is set up some kind of default.
And in this case, I would just want to throw the error if there is no matching action type.
Remember, we also have an option of just returning a state that was one of the options.
But in this case, I'm going to go with default.
So that's my default case.
If none of the actions that I passed in March are going to say default here, and then I would want
to throw error somewhere safe, say all new error, and I would want to pass incomplete.
Right.
We were going to go with no matching matching over here action type.
So let's add your quotation marks and we're going to go with action type one more quotation mark and
action type.
We're Servet.
And check it out now, of course, we are loading why one, because our set loading is returning to
state and then we said is loading tomorrow.
Now, again, if you're wondering why we have actually true and we also set it up here when we're fetching
stories because we'll fetch for new stories as we're typing.
So always every time I change something here in input, I would want to start with loading.
So that's going to be my initial start.
And we're almost done with our initial setup.
Everything works beautifully.
We have set loading.
But now let's think about it a little bit where notice here I have the strength I have set loading.
And then I also have in the reducer set loading, and it is very easy for me to make a mistake where
if I go to context and if I'm typing this string modify by mistake, add the S at the end of my loading.
Well, now I have a big fat error where it says no matching settlor, which is exactly what I wanted
to correct because that is my default, where I'm checking if the action type doesn't match anything
that I have right now in my producer, then I throw the error.
I say no matching and then the action type that was passed in.
And notice here, of course, I'm checking for set loadings line and here I'm checking for set loading.
So what is a better option?
Well, a better option.
Is the set up all your actions as variables, so what does that mean, that you create a file and notice
how I'm right away exporting?
So I come up with some kind of name that is my variable name, and then here I have the value for the
string.
And instead of hopping around my project and then passing the string like so where I can of course make
silly typos, instead I import where I'm setting up my use reducer as well as where I have the actual
producer.
So since I'm exporting these variables now, I can import in both places.
And then instead of using a string each and every time I use the variable.
So I'm not going to go with set loading, I'm going to go with my variable, which has the name of the
loading.
And I'm also going to do the same thing over here where I have the producer.
So instead of setting up as a string, I'm going to go with my variable.
And what's really cool that this just prevents you from doing something wrong, because now, of course,
this value is in one place.
It is sitting in the actions and we just export it.
And everywhere where we want to use that string value, we just import that loading.
And in that case, if I make some kind of typo here, if I go set loading out right away, I have the
error where react complains, hey, set loading is not define what variable are you trying to get?
And of course in my case that is set loading.
That is the proper variable.
Now this is more of a common pattern.
Doesn't mean that you need to follow it.
If you like to pass everything as a string, you can definitely do so.
But you will see this pattern used a lot where again, we set up some kind of separate file.
We come up with names, so variable names and then we have the values again.
Common practice is used in uppercase, but you don't have to.
And then of course, I come up with my action types.
I notice here how I already created all of them for you because again, I thought that it would be somewhat
redundant if we would just retype the action variables with the values.
And then in both places where I have the producer, I import all the actions that hold those string
values and the same goes in the context.
So when I would want to dispatch some kind of action, I just pass in the variable and then in the reducer.
When I want to handle some kind of action type.
Again, I use the same variable, which of course holds the same string and just like that.
We have loading displayed on screen, we have structure for both for producer for the context.
Yes.
And we're in good shape to continue with our application.