1
00:00:00,740 --> 00:00:04,210
In this video we're going to move on to our second big rule around reducers.

2
00:00:04,220 --> 00:00:10,010
So with this rule we say that producers are supposed to produce or return state or data that is going

3
00:00:10,010 --> 00:00:15,710
to be used inside of our application and the producer has to do so using only the previous state from

4
00:00:15,710 --> 00:00:20,930
the last time that it was called and the action object that has been dispatched and is being passed

5
00:00:20,960 --> 00:00:22,790
into a given reducer.

6
00:00:22,790 --> 00:00:25,450
Now understanding this text right here is a little bit challenging.

7
00:00:25,460 --> 00:00:29,710
So we're going to look at a diagram or to help you really understand what's going on here.

8
00:00:29,720 --> 00:00:30,670
All right.

9
00:00:31,770 --> 00:00:34,060
This is a diagram of what happens to your reducer.

10
00:00:34,140 --> 00:00:38,010
The very first time that it gets called inside of your application.

11
00:00:38,070 --> 00:00:43,350
Now as I mentioned in the last video when you first start up the redux application each reducer is going

12
00:00:43,350 --> 00:00:46,050
to be automatically called exactly one time.

13
00:00:46,230 --> 00:00:52,260
So it is a automatic invocation that essentially allows your reducers to specify some default state

14
00:00:52,270 --> 00:00:57,230
value the first time your seducer gets called during that initialization process.

15
00:00:57,270 --> 00:00:59,440
It's going to receive two arguments.

16
00:00:59,610 --> 00:01:02,850
The first argument is going to have a value of undefined.

17
00:01:03,090 --> 00:01:08,070
And then the second argument will be some action object that we might refer to as action number one

18
00:01:08,100 --> 00:01:11,520
because it is the first action that the reducers going to see.

19
00:01:11,970 --> 00:01:18,390
So it is then up to the reducer to take these two arguments right here and return some initial state

20
00:01:18,480 --> 00:01:19,620
value.

21
00:01:19,620 --> 00:01:21,990
Now we really already went through this process right here.

22
00:01:22,110 --> 00:01:27,600
Back when we put together the song's application in the last section I'm going to pull on some code

23
00:01:27,600 --> 00:01:31,050
from that application onto the screen really quickly OK.

24
00:01:31,050 --> 00:01:34,250
So here's our selected song reducer.

25
00:01:34,380 --> 00:01:39,570
So when our application first started up selected song reducer was invoked automatically.

26
00:01:39,570 --> 00:01:44,810
One time let's imagine that the code for invoking at one time was placed right here.

27
00:01:44,970 --> 00:01:51,340
So redux internally did something like selected song reducer and it passed in a first argument with

28
00:01:51,340 --> 00:01:53,460
the value of undefined.

29
00:01:53,700 --> 00:01:58,350
And then the second object is going to be some initialization action object.

30
00:01:58,350 --> 00:02:01,650
We don't really know what type that this action is going to have.

31
00:02:01,740 --> 00:02:06,300
We just know that it's going to be in there it's going to be an action object with some mystery type

32
00:02:06,300 --> 00:02:08,180
property that we don't really know.

33
00:02:09,080 --> 00:02:13,670
So the first time that our reduced or gets called we're going to essentially look at that first argument

34
00:02:13,670 --> 00:02:17,190
right there and very quickly realize that it is undefined.

35
00:02:17,330 --> 00:02:21,720
That's why we put a default value for selected song right here.

36
00:02:21,770 --> 00:02:24,230
Remember what this syntax right here really does.

37
00:02:24,230 --> 00:02:31,070
It's a little bit of yes 20:15 syntax that is essentially the equivalent of saying if selected song

38
00:02:31,610 --> 00:02:39,650
is equal to undefined then change the value of selected song to be no instead.

39
00:02:39,790 --> 00:02:43,550
So again the very first time we call the reduce our first argument is undefined.

40
00:02:43,720 --> 00:02:46,200
We don't really want to deal with that value of undefined.

41
00:02:46,240 --> 00:02:52,240
So we are going to default it's value to instead be null and that little option right there that defaulting

42
00:02:52,240 --> 00:02:58,150
is only going to take place the very first time that a reduced or gets in vote member all the equals

43
00:02:58,150 --> 00:03:02,050
nil right there does is check to see if selected song is equal to undefined.

44
00:03:02,140 --> 00:03:05,890
If it does it's going to update the value of that argument to be NULL instead.

45
00:03:06,660 --> 00:03:11,150
We're not going to always default a argument like this to be equal to nil.

46
00:03:11,190 --> 00:03:17,730
In many cases we will instead defaulted to be an empty array or it might be an empty string or some

47
00:03:17,820 --> 00:03:20,310
number like the number 10 or something like that.

48
00:03:20,390 --> 00:03:24,750
It really just comes down to the purpose of the reducer that we are working on to decide on the default

49
00:03:24,750 --> 00:03:25,440
value.

50
00:03:25,800 --> 00:03:30,930
But in the case of selected song reducer a default value of Noal made a lot of sense because that meant

51
00:03:31,140 --> 00:03:35,090
no there is no currently selected value inside of our application.

52
00:03:36,760 --> 00:03:37,350
OK.

53
00:03:37,600 --> 00:03:42,910
So I can clean that up really quick and we're going to flip back over to this diagram I guess that's

54
00:03:42,910 --> 00:03:47,980
what happens the first time the reducer is cult now where things start to get really interesting is

55
00:03:47,980 --> 00:03:53,370
the second or third or fourth or fifth time that the reducer gets caught the next time.

56
00:03:53,380 --> 00:03:58,480
Like the second time that this producer gets called The first argument is no longer going to be equal

57
00:03:58,480 --> 00:04:00,050
to the value undefined.

58
00:04:00,070 --> 00:04:05,810
Instead it's going to be whatever the reduce or returns the last time that it was ran.

59
00:04:05,830 --> 00:04:10,200
You'll notice that the first one to reduce ran it returned what we call state view one right here.

60
00:04:10,360 --> 00:04:15,910
So the next time the second time that the reducer gets called The first argument will then be equal

61
00:04:15,910 --> 00:04:18,530
to state v 1.

62
00:04:18,550 --> 00:04:24,850
So essentially that first argument into your reducer is always going to be what ever it was it returned

63
00:04:24,910 --> 00:04:26,610
the last time it was ran.

64
00:04:26,860 --> 00:04:31,300
So you can kind of imagine that we've got this kind of acyclic action where our reducer just keeps on

65
00:04:31,300 --> 00:04:35,040
getting called with its own value that is turning over and over again.

66
00:04:35,230 --> 00:04:38,940
And the only real change inside there is the action object.

67
00:04:38,950 --> 00:04:43,660
The only thing that changes each under a or gets called is that action object and the type in Paillard

68
00:04:43,660 --> 00:04:48,770
property inside of it I get so that's what the second rule right here is talking about.

69
00:04:48,770 --> 00:04:55,430
Our producer must return some data or some state using only the previous state value that it returned

70
00:04:55,730 --> 00:04:57,570
and the action object.

71
00:04:57,920 --> 00:05:01,830
So now that we have a better idea of rule number two right here let's take a quick pause.

72
00:05:01,840 --> 00:05:03,740
Ill move on to rule number three.