1
00:00:00,890 --> 00:00:05,600
In the last video we got a quick overview of doing function memoization inside of Javascript.

2
00:00:05,720 --> 00:00:10,580
So we're not going to install the load Eshe library into our project and use it to memorize one of our

3
00:00:10,580 --> 00:00:15,050
actual creators so that it does not constantly fetch the same user over and over again.

4
00:00:15,140 --> 00:00:16,790
So I can flip on over to my terminal.

5
00:00:16,790 --> 00:00:22,980
I'm going to start my server with Control C and then I'll run NPM install dash and save load ash.

6
00:00:23,000 --> 00:00:26,930
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

7
00:00:26,930 --> 00:00:31,660
done I'm going to start my server backup with NPM start as usual.

8
00:00:31,690 --> 00:00:34,330
All right so NPM start and there we go.

9
00:00:34,330 --> 00:00:37,080
Everything launches Bekka.

10
00:00:37,290 --> 00:00:42,160
I'm not going to flip on over to my code editor and I'm going to open up my action creators file.

11
00:00:42,180 --> 00:00:50,330
So in spite of actions index yes I'll first begin by importing the load Eshe library up at the top like

12
00:00:50,350 --> 00:00:51,610
so now.

13
00:00:51,640 --> 00:00:55,860
Usually by convention we import the ash library as the underscore character.

14
00:00:55,870 --> 00:00:59,230
Rather than calling it so like load ash or something like that.

15
00:00:59,770 --> 00:01:00,100
All right.

16
00:01:00,130 --> 00:01:08,110
Now we can use load ashed to memorize our action creator but just one quick pause remember in the start

17
00:01:08,140 --> 00:01:12,490
of the last video I had told you that this solution was going to involve changing just a couple of lines

18
00:01:12,490 --> 00:01:18,610
of code but it was also going to involve some really nasty syntax so unfortunately we cannot just kind

19
00:01:18,610 --> 00:01:23,470
of memorize this fetch user function and expect everything to work as expected.

20
00:01:24,260 --> 00:01:27,020
Instead it's going to be just a little bit challenging.

21
00:01:27,120 --> 00:01:32,720
Let me show you why we're going to try to apply the memoires function to our action creator right here

22
00:01:32,780 --> 00:01:38,000
and you're going to very quickly see that things are not quite working as you might expect now to apply

23
00:01:38,060 --> 00:01:39,050
them wise to this thing.

24
00:01:39,170 --> 00:01:44,300
I'm going to first rewrite it using the function keywords as opposed to erro functions just so that

25
00:01:44,300 --> 00:01:47,250
it's really clear in the syntax exactly what is going on.

26
00:01:48,520 --> 00:01:54,880
So I'm going to copy that user action creator and then I'm going to comment out the original one for

27
00:01:54,880 --> 00:02:00,640
just a moment we're going to use this code again in just a moment but I want to re factor this thing

28
00:02:00,850 --> 00:02:05,090
to use the function keyword as opposed to era functions just to make this more clear.

29
00:02:05,870 --> 00:02:12,530
All right so now I'm going to put a new line right after async dispatch right here and I'm going to

30
00:02:12,530 --> 00:02:18,980
turn this into a normal keyword function by putting in the function keyword removing that arrow right

31
00:02:18,980 --> 00:02:24,690
there and then I'll put in a new clearly brace after the dispatch like so.

32
00:02:24,840 --> 00:02:28,620
So right there normal function keyword.

33
00:02:28,630 --> 00:02:31,750
Now I'm going to do the same process on the arrow function up here.

34
00:02:32,830 --> 00:02:39,240
I'll change it to a function that gets called with ID and an opening Crilley Berrys like so now at this

35
00:02:39,240 --> 00:02:44,760
point I would encourage you to do a quick save and make sure that you don't see any error messages like

36
00:02:44,760 --> 00:02:46,380
the one that I have right here.

37
00:02:47,440 --> 00:02:49,550
So let's figure out what's going wrong right here.

38
00:02:49,550 --> 00:02:51,780
See I need to return that thing for sure.

39
00:02:51,860 --> 00:02:53,830
And then I must have some other typo inside of me.

40
00:02:53,960 --> 00:02:55,740
That's better I guess.

41
00:02:55,750 --> 00:02:58,940
Make sure that you've got no ears inside of your browser.

42
00:02:59,500 --> 00:03:04,000
Now once you've got that all set up well then attempt to memorize one of these two functions.

43
00:03:04,010 --> 00:03:05,830
So notice how there really are two functions here.

44
00:03:05,840 --> 00:03:07,830
There's the outer function and the inner one.

45
00:03:07,840 --> 00:03:11,040
So the question is which one are we going to actually memorize.

46
00:03:11,230 --> 00:03:14,950
Well let's just take a guess here and try to memorize the outer function first.

47
00:03:14,980 --> 00:03:21,010
So I'm going to say underscore Mentawai is a place my print the C and I'll place the closing parentheses

48
00:03:21,070 --> 00:03:24,610
around the entire function like so down here on the bottom line.

49
00:03:25,220 --> 00:03:28,110
So now let's save this and see if it solves our problem.

50
00:03:28,120 --> 00:03:33,970
Remember in theory now we are going to assign a memorized version of this function to the Fettes user

51
00:03:34,180 --> 00:03:36,320
and export it from this file.

52
00:03:36,340 --> 00:03:42,640
And so in theory we should only ever be allowed to call this function with a unique argument one time

53
00:03:42,960 --> 00:03:47,560
and after that one time will then just return whatever the previous return value was.

54
00:03:47,680 --> 00:03:51,090
So again you might be expecting that this would solve the problem.

55
00:03:51,100 --> 00:03:52,330
All right so let's save this.

56
00:03:52,330 --> 00:03:58,110
Flip back over and you're going to very quickly see that we're still making a ton of different requests

57
00:03:58,110 --> 00:03:58,620
here.

58
00:03:58,890 --> 00:04:00,040
So what's going on.

59
00:04:00,330 --> 00:04:05,850
Well actually this is kind of playing out with memoires exactly as you really would expect if you think

60
00:04:05,850 --> 00:04:09,520
about it every single time that we call this function right here.

61
00:04:09,540 --> 00:04:13,840
It's going to return whatever was returned the first time it was called.

62
00:04:13,890 --> 00:04:16,050
In this case it is a function.

63
00:04:16,050 --> 00:04:19,800
We are returning this function right here every single time it gets called.

64
00:04:19,800 --> 00:04:25,620
Even though it is memorized because that is the purpose of memoization we're not technically rerunning

65
00:04:25,680 --> 00:04:26,700
this code right here.

66
00:04:26,820 --> 00:04:29,690
We're not running the function again with the given ID.

67
00:04:29,820 --> 00:04:35,430
But we are returning the same function that was returned the first time because we returned that function

68
00:04:36,030 --> 00:04:39,390
Reducto thunk is still going to invoke that function.

69
00:04:39,390 --> 00:04:42,360
So redux thunk is still going to call this thing right here.

70
00:04:43,250 --> 00:04:44,860
Right with dispatch.

71
00:04:44,890 --> 00:04:47,890
And inside of there we're still going to make our network request.

72
00:04:47,900 --> 00:04:53,210
So unfortunately this is kind of expected behavior of nebulized but it doesn't quite do exactly what

73
00:04:53,210 --> 00:04:54,360
we wanted.

74
00:04:54,410 --> 00:04:55,770
So let's try the second option here.

75
00:04:55,790 --> 00:05:01,480
Let's try to remove the memoires out to the outer function and I want to make sure I clean up the parentheses

76
00:05:01,520 --> 00:05:05,580
down there as well and then I'll try minimalizing the inner function right here.

77
00:05:05,740 --> 00:05:12,280
So right in front of async I'll put underscore minimalize and I'll make sure I put my closing print

78
00:05:12,280 --> 00:05:14,650
see right there in line 21 for me.

79
00:05:15,860 --> 00:05:19,070
OK so now we are memorizing the interior or inner function.

80
00:05:19,070 --> 00:05:22,450
This is the one that actually gets invoked with redux thunk.

81
00:05:22,490 --> 00:05:28,760
So hopefully now redux sunk will only be able to call that function one time and never again after that.

82
00:05:28,760 --> 00:05:34,180
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

83
00:05:34,180 --> 00:05:36,000
making all these requests.

84
00:05:36,010 --> 00:05:40,310
So even with this approach we're still running into issues and it's not doing what we expect.

85
00:05:40,360 --> 00:05:41,400
So why is that.

86
00:05:41,620 --> 00:05:47,610
Well remember every single time that we call this action creator we are going to declare a new function.

87
00:05:47,620 --> 00:05:54,340
We recreate this function right here in memory every single time that we call fetch user.

88
00:05:54,340 --> 00:05:59,000
So we recreate this function and then we memorize it and return it.

89
00:05:59,000 --> 00:06:01,720
Now we definitely memorize the internal the interior function right.

90
00:06:01,940 --> 00:06:07,430
So in theory it's not going to be called multiple times by redux stunk but really remember what happens

91
00:06:07,440 --> 00:06:13,340
here every time we call fetch user We're going to create a new version of the interior function and

92
00:06:13,400 --> 00:06:15,960
memorize it every single time.

93
00:06:15,980 --> 00:06:20,450
So even though we are memorizing this thing we are memorizing a new version of the function.

94
00:06:20,510 --> 00:06:22,670
Every time we call the action creator.

95
00:06:22,670 --> 00:06:27,740
So every time we call the action creator new memorized version comes out and we can successfully call

96
00:06:27,830 --> 00:06:32,630
that memorized version and the original interior function right here will be invoked because we are

97
00:06:32,630 --> 00:06:34,860
recreating it every single time.

98
00:06:35,590 --> 00:06:40,160
So like I said this problem is not quite as crystal clear as you might expect.

99
00:06:40,180 --> 00:06:44,140
So now that we understand why we cannot just throw memories inside of here willy nilly.

100
00:06:44,140 --> 00:06:45,210
Let's take a quick pause.

101
00:06:45,250 --> 00:06:47,920
We'll take a look at how we're going to solve this problem in the next video.