In the last video we spoke about why this async await syntax is throwing off our action creator.
Now whenever I tell someone that OIA async wait right here throwing it off and it's making our requests
not work as expected.
I always get a very common question as a follow up immediately afterwards.
People very frequently say okay well what if we just remove a async away like so and so now we don't
get any special syntax when this gets transported to.
Yes Phife.
Now we are in fact going to be returning a plain javascript object.
We would not really refer to this variable as a response anymore.
It is technically a promise.
So I'm going to assign Promus like so.
Now the reason we refer to this as a promise is that when we call this line of code right here we are
making requests over to our API that is going to take some amount of time to complete that request like
it might take 100 milliseconds or 500 milliseconds or 10 seconds who knows how long it's going to take.
So we make this request right here.
And then what gets returned to us and assigned to this variable is something that we call a promise
and that promise object essentially is going to give us a little finger or a handle a little notification
when the request is completed at some point in the future.
So without the syncopate syntax we do not get some data back right here.
Instead we get a promise object that is going to give us access to our data when we eventually get it
at some point in the future.
Now with that in mind the code you see here still works just fine.
We can save this flip back over to the browser and you'll see that the error message has gone away.
It's because we no longer have the nasty async await syntax.
We are returning a normal javascript object.
So even though the error message went away this code that you see right here is still probably not going
to work as you expect.
So in this video I want to tell you why this would not work.
As you might expect OK so as you might guess the code snippet that we see is essentially tied to this
item right here.
The second reason that fenceposts is not going to work by the time our action object gets to reduce
or we will not have retrieved our data from that API that is the root or the crux of the issue.
That is why this alternate syntax right here is not going to work out as you might expect.
So let me show you a couple of diagrams to help you understand exactly why.
So here's our redux cycle.
We've looked at this diagram a couple of times at the very top.
We've got our action creator.
We call the action creator returns in action.
That action is going to get dispatch automatically by the re-act redux library sent off to all of our
different reducers the reducers are going to rerun and we get some new state object back.
Now here's something very important to keep in mind when we call an action Creator and it returns the
action and we dispatch it and it goes to our reducers.
All of those steps right there are going to be executed in a fraction of a fraction of a second.
We're talking about like fractions of a millisecond here.
Amazingly amazingly quickly.
So the time that it takes to color action creator return the action and get that overtalk reducers is
as fast as you can possibly imagine.
Instantaneous now that causes an issue with the fact that we are making an asynchronous requests here.
Here's what is really going on behind the scenes.
So I've got two separate flows here on the left hand side is what is happening inside of redux on the
right hand side is what is happening with our request so we color action creator.
We return that action object again.
You know we're talking about this refactored code right here where we've got the promise on the palette
property we dispatched that action.
So the action gets sent to all of our reducers producers run.
We don't currently really have any functional reducers but I'm sure you can imagine that we're going
to want to reach into the response and pull out the list of posts that we fetch but in this case we
do not yet have any data return from that API.
Remember these series of steps right here.
Instantaneous as fast as you can possibly imagine.
Now at the same time that we call the action creator we are going to make the request over to the type
of code API that request is going to take some unknown amount of time.
It might take 10 milliseconds.
It might take ten thousand milliseconds it might take 10 minutes who knows its going to take some crazy
amount of time to eventually get a response back from that API.
So by the time we finally get a response from the API our action has long since been processed by our
reducers our reducers have already ran.
And they have looked inside that promise object and said oh the request isnt complete and theres nothing
that we can do inside of our reducers to somehow delay them from running.
There's nothing we can do over here that says hey reduce or like just hold on for a second wait for
this promise to get some data back and then run yourself.
Thats not an option here.
So I think you get the idea now with this alternate syntax when we return an object it gets sent off
to the reducers but that all happened so quickly that it happens and completes itself way before we
ever get any data back from our API.
So in other words even if we use this alternate syntax right here without the async or awaits we would
still run into an issue where we could not get access to our data.
All right.
So thats pretty much it.
That is the two reasons that are fecche post action creator was not working as intended.
The first one was pretty obvious only in the fact that I should say pretty obvious I mean to say obvious
in the fact that we got that big nasty error message that it was.
Thats what I meant by that I mean to say we saw an error message that made it very clear that something
was going wrong.
But the second problem was much more subtle and really requires you to understand what is going on behind
the scenes with redux.
So now that we understand these big problems are going to take a quick pause right here when we come
back the next section we're going to start to discuss how we're going to make use of this middleware
thing called it redux thunk and how it's going to solve all these issues.
So quick pause and I'll see you in just a minute.