1
00:00:00,840 --> 00:00:05,790
In the last video I made a big deal around the fact that we imported our action creator right here and

2
00:00:05,790 --> 00:00:10,920
then passed off the action creator to the connect function at the bottom as opposed to just directly

3
00:00:10,920 --> 00:00:13,810
calling the action creator inside of our component.

4
00:00:13,980 --> 00:00:18,300
So in this video I want to tell you a little bit more about exactly why that is happening.

5
00:00:18,300 --> 00:00:21,940
All right so here's the important thing to understand this right here.

6
00:00:21,990 --> 00:00:27,420
I want you to read this very carefully and remember it for every application that you ever put together

7
00:00:27,420 --> 00:00:34,470
with redux redux is not magic redux does not somehow automatically detect any time that you call an

8
00:00:34,470 --> 00:00:35,770
action creator.

9
00:00:35,820 --> 00:00:40,620
It does not automatically detect any time that a function inside your application returns an object

10
00:00:40,620 --> 00:00:42,480
that is called an action.

11
00:00:42,480 --> 00:00:43,800
Now what do I mean by this.

12
00:00:43,800 --> 00:00:49,950
Well if we go back over to our actions index such as file you'll remember that this contains our action

13
00:00:49,950 --> 00:00:50,760
creator.

14
00:00:50,770 --> 00:00:56,040
Now you and I are referring to this function as an action creator but there's nothing about this function

15
00:00:56,040 --> 00:01:01,310
right here that somehow automatically wires itself into redux.

16
00:01:01,320 --> 00:01:04,800
There's nothing inside this function that somehow registers the function it's redux.

17
00:01:04,800 --> 00:01:11,740
There's nothing to say that anytime that I call this function like so in return that action that redux

18
00:01:11,740 --> 00:01:16,750
has and to somehow magically detect that and take the action and threw it off to all those reducers

19
00:01:16,770 --> 00:01:21,130
and update our state that does not happen at any step.

20
00:01:21,130 --> 00:01:26,470
So with that in mind when we are inside of our songless component and we import the select song action

21
00:01:26,470 --> 00:01:32,710
creator right here we're not so much importing action creator as we are importing a regular plain old

22
00:01:32,860 --> 00:01:35,230
javascript function.

23
00:01:35,290 --> 00:01:41,410
So if we call select song inside iffier we absolutely can we can call select song all day inside of

24
00:01:41,410 --> 00:01:46,960
our component as many times as you want but this is going to be treated as a normal javascript function

25
00:01:46,960 --> 00:01:47,540
call.

26
00:01:47,680 --> 00:01:48,790
We're going to call the function.

27
00:01:48,880 --> 00:01:51,930
It's going to return an object and that's it.

28
00:01:52,030 --> 00:01:54,820
The object that gets returned from all these function calls right.

29
00:01:54,830 --> 00:02:00,670
You're never somehow magically gets forwarded over to redux redux doesn't detect that we called a function

30
00:02:00,670 --> 00:02:05,510
that you and I are arbitrarily calling a action creator that does not occur.

31
00:02:05,950 --> 00:02:11,200
If we ever want to make sure that an action eventually makes it way its way over to our reducers we

32
00:02:11,260 --> 00:02:16,780
have to call that dispatch function we have to take the action that gets returned and we have to pass

33
00:02:16,780 --> 00:02:18,970
it into the dispatch function.

34
00:02:18,970 --> 00:02:22,590
Now we saw an example of that back on the code Penn. example that we went through.

35
00:02:22,870 --> 00:02:24,720
So here's that code Penn. example.

36
00:02:24,820 --> 00:02:30,370
Notice how every single time that we dispatched an action we called our action creator that returned

37
00:02:30,400 --> 00:02:31,810
an action object.

38
00:02:31,960 --> 00:02:34,530
And then that was automatically passed or directly passed.

39
00:02:34,530 --> 00:02:41,560
I should say into the store dispatch function if we had not passed the result of calling those action

40
00:02:41,560 --> 00:02:50,380
creators after the dispatch function if we had instead simply called say create policy with Alex like

41
00:02:50,390 --> 00:03:01,140
so and then maybe create a claim for Alex and then maybe he deleted the policy for Alex like so none

42
00:03:01,140 --> 00:03:06,050
of these function calls right here are going to update our read book store they return actions.

43
00:03:06,060 --> 00:03:11,600
Yes but those actions never got sent into redux and they never ended up inside of a reducers.

44
00:03:11,640 --> 00:03:16,440
And so if I look at my counsel log over here of my final get state call you'll notice that I have no

45
00:03:16,440 --> 00:03:20,460
policy no claims and no change in my default amount of money.

46
00:03:20,850 --> 00:03:25,650
So if we ever want to make sure that an action Creator actually updates our states we have to take the

47
00:03:25,650 --> 00:03:29,580
action that gets returned and send it into that dispatch function.

48
00:03:29,580 --> 00:03:34,710
Now of course you do not actually see any reference to dispatch inside of our component.

49
00:03:34,710 --> 00:03:37,050
There's no reference to dispatch inside of here.

50
00:03:37,140 --> 00:03:38,440
So what's really going on.

51
00:03:38,730 --> 00:03:44,820
Well essentially when we pass our action creators right here into the connect function the connect function

52
00:03:44,880 --> 00:03:49,470
does a special operation on the functions inside of this object.

53
00:03:49,470 --> 00:03:55,020
It looks at all the functions include inside this object and it essentially wraps them up in a nother

54
00:03:55,080 --> 00:04:02,330
javascript function when we call the new javascript function the connect function is going to automatically

55
00:04:02,330 --> 00:04:03,820
color action creator.

56
00:04:03,920 --> 00:04:08,360
It's going to automatically take the action that gets returned and it's going to automatically call

57
00:04:09,200 --> 00:04:10,870
the where is it.

58
00:04:10,870 --> 00:04:19,670
Here we go the dispatch function for us so bypassing our action creator into that connect function whenever

59
00:04:19,670 --> 00:04:25,190
we call the prompt start action creator or the X creator that gets added to our prop's object the connect

60
00:04:25,190 --> 00:04:29,420
function is going to automatically take the action that gets returned and throw it into the dispatch

61
00:04:29,420 --> 00:04:31,160
function for us.

62
00:04:31,160 --> 00:04:34,490
So all that is happening behind the scenes and you don't really have to think about it when you are

63
00:04:34,490 --> 00:04:36,540
making use of the connect function.

64
00:04:36,650 --> 00:04:40,790
So that's where we passed our action creator off to the connect function as opposed to just directly

65
00:04:40,790 --> 00:04:43,300
calling it from inside of our component.

66
00:04:43,340 --> 00:04:48,350
So any time that you ever want to call a action creator from a component you are always going to pass

67
00:04:48,350 --> 00:04:54,740
it into this connect function as opposed to just arbitrarily calling it as you had to import it inside

68
00:04:54,740 --> 00:04:58,590
if you're like so not going to do this all right.

69
00:04:58,610 --> 00:04:59,270
That's pretty much it.

70
00:04:59,270 --> 00:05:01,270
Hopefully that makes a little bit more sense.

71
00:05:01,340 --> 00:05:06,560
Now we're going to see this pattern of redux not being magic in many other locations.

72
00:05:06,560 --> 00:05:11,150
At every step along the way I want to recall that redux is not magic and it's not going to just kind

73
00:05:11,150 --> 00:05:13,370
of help you along your way.

74
00:05:13,370 --> 00:05:17,540
You have to actually do a lot of wiring up and that's actually one of the chief complaints around the

75
00:05:17,540 --> 00:05:22,100
library a lot of people say that whenever you write redux code it involves a lot of boilerplate because

76
00:05:22,100 --> 00:05:26,900
you have to kind of write all these functions and then manually hook them all all together as opposed

77
00:05:26,900 --> 00:05:31,410
to other state management libraries that are a little bit more magic and a little bit more automatic.

78
00:05:31,580 --> 00:05:36,580
So it's kind of up to you whether you prefer the magic or actually understanding what's going on.

79
00:05:36,590 --> 00:05:37,860
Again totally up to you.

80
00:05:38,220 --> 00:05:40,640
OK so now that we understand what's going on there.

81
00:05:40,640 --> 00:05:45,290
Last thing I want to do inside the map state to prop's Yeah we understand that we are updating our state

82
00:05:45,350 --> 00:05:46,930
every time that we click on that button.

83
00:05:46,940 --> 00:05:48,980
So I don't think we need that console log anymore.

84
00:05:49,100 --> 00:05:50,990
So I'm going to clean up like so.

85
00:05:51,020 --> 00:05:51,250
All right.

86
00:05:51,260 --> 00:05:52,680
So let's take a quick pause right here.

87
00:05:52,760 --> 00:05:58,100
When we come back the next section now that we know that we are able to successfully select a song we're

88
00:05:58,100 --> 00:06:01,820
going to start working on our last component the song detail.

89
00:06:01,910 --> 00:06:03,930
So quick break and I'll see you in just a moment.