In the last video we got a quick overview of doing function memoization inside of Javascript.
So we're not going to install the load Eshe library into our project and use it to memorize one of our
actual creators so that it does not constantly fetch the same user over and over again.
So I can flip on over to my terminal.
I'm going to start my server with Control C and then I'll run NPM install dash and save load ash.
This is going to take just a moment to install so I'll just let it do its thing and then once it's all
done I'm going to start my server backup with NPM start as usual.
All right so NPM start and there we go.
Everything launches Bekka.
I'm not going to flip on over to my code editor and I'm going to open up my action creators file.
So in spite of actions index yes I'll first begin by importing the load Eshe library up at the top like
so now.
Usually by convention we import the ash library as the underscore character.
Rather than calling it so like load ash or something like that.
All right.
Now we can use load ashed to memorize our action creator but just one quick pause remember in the start
of the last video I had told you that this solution was going to involve changing just a couple of lines
of code but it was also going to involve some really nasty syntax so unfortunately we cannot just kind
of memorize this fetch user function and expect everything to work as expected.
Instead it's going to be just a little bit challenging.
Let me show you why we're going to try to apply the memoires function to our action creator right here
and you're going to very quickly see that things are not quite working as you might expect now to apply
them wise to this thing.
I'm going to first rewrite it using the function keywords as opposed to erro functions just so that
it's really clear in the syntax exactly what is going on.
So I'm going to copy that user action creator and then I'm going to comment out the original one for
just a moment we're going to use this code again in just a moment but I want to re factor this thing
to use the function keyword as opposed to era functions just to make this more clear.
All right so now I'm going to put a new line right after async dispatch right here and I'm going to
turn this into a normal keyword function by putting in the function keyword removing that arrow right
there and then I'll put in a new clearly brace after the dispatch like so.
So right there normal function keyword.
Now I'm going to do the same process on the arrow function up here.
I'll change it to a function that gets called with ID and an opening Crilley Berrys like so now at this
point I would encourage you to do a quick save and make sure that you don't see any error messages like
the one that I have right here.
So let's figure out what's going wrong right here.
See I need to return that thing for sure.
And then I must have some other typo inside of me.
That's better I guess.
Make sure that you've got no ears inside of your browser.
Now once you've got that all set up well then attempt to memorize one of these two functions.
So notice how there really are two functions here.
There's the outer function and the inner one.
So the question is which one are we going to actually memorize.
Well let's just take a guess here and try to memorize the outer function first.
So I'm going to say underscore Mentawai is a place my print the C and I'll place the closing parentheses
around the entire function like so down here on the bottom line.
So now let's save this and see if it solves our problem.
Remember in theory now we are going to assign a memorized version of this function to the Fettes user
and export it from this file.
And so in theory we should only ever be allowed to call this function with a unique argument one time
and after that one time will then just return whatever the previous return value was.
So again you might be expecting that this would solve the problem.
All right so let's save this.
Flip back over and you're going to very quickly see that we're still making a ton of different requests
here.
So what's going on.
Well actually this is kind of playing out with memoires exactly as you really would expect if you think
about it every single time that we call this function right here.
It's going to return whatever was returned the first time it was called.
In this case it is a function.
We are returning this function right here every single time it gets called.
Even though it is memorized because that is the purpose of memoization we're not technically rerunning
this code right here.
We're not running the function again with the given ID.
But we are returning the same function that was returned the first time because we returned that function
Reducto thunk is still going to invoke that function.
So redux thunk is still going to call this thing right here.
Right with dispatch.
And inside of there we're still going to make our network request.
So unfortunately this is kind of expected behavior of nebulized but it doesn't quite do exactly what
we wanted.
So let's try the second option here.
Let's try to remove the memoires out to the outer function and I want to make sure I clean up the parentheses
down there as well and then I'll try minimalizing the inner function right here.
So right in front of async I'll put underscore minimalize and I'll make sure I put my closing print
see right there in line 21 for me.
OK so now we are memorizing the interior or inner function.
This is the one that actually gets invoked with redux thunk.
So hopefully now redux sunk will only be able to call that function one time and never again after that.
All right so I'm going to save this and we'll flip back over and we'll very quickly see if we're still
making all these requests.
So even with this approach we're still running into issues and it's not doing what we expect.
So why is that.
Well remember every single time that we call this action creator we are going to declare a new function.
We recreate this function right here in memory every single time that we call fetch user.
So we recreate this function and then we memorize it and return it.
Now we definitely memorize the internal the interior function right.
So in theory it's not going to be called multiple times by redux stunk but really remember what happens
here every time we call fetch user We're going to create a new version of the interior function and
memorize it every single time.
So even though we are memorizing this thing we are memorizing a new version of the function.
Every time we call the action creator.
So every time we call the action creator new memorized version comes out and we can successfully call
that memorized version and the original interior function right here will be invoked because we are
recreating it every single time.
So like I said this problem is not quite as crystal clear as you might expect.
So now that we understand why we cannot just throw memories inside of here willy nilly.
Let's take a quick pause.
We'll take a look at how we're going to solve this problem in the next video.