1
00:00:00,930 --> 00:00:06,510
In the last section we finish up a rather long analogy I apologize for it being so long but we're now

2
00:00:06,510 --> 00:00:11,040
going to take all this idea behind this insurance company and we're going to apply it to the world of

3
00:00:11,040 --> 00:00:11,550
redux.

4
00:00:11,550 --> 00:00:15,600
And you're going to very quickly see that every step that we went through with this insurance company

5
00:00:15,600 --> 00:00:18,320
analogy mounts up perfectly to the redux world.

6
00:00:18,480 --> 00:00:20,160
So let's get to it.

7
00:00:20,160 --> 00:00:23,580
All right so here is our original diagram with the redux cycle.

8
00:00:23,580 --> 00:00:25,980
We didn't really talk about the redux cycle at all.

9
00:00:26,070 --> 00:00:31,530
But now without really talking about it you really have an understanding of what each of these things

10
00:00:31,590 --> 00:00:35,640
are and what the purpose of each one is on the bottom here.

11
00:00:35,640 --> 00:00:40,410
I've taken a different step of the flow inside of our insurance company and we've mapped it up to a

12
00:00:40,410 --> 00:00:42,410
different step inside the redux cycle.

13
00:00:42,540 --> 00:00:48,820
So let's start first with the two boxes on the left hand side for each read cycle an insurance company.

14
00:00:48,870 --> 00:00:54,090
So we had said that everything inside of our insurance company started off with some one some customer

15
00:00:54,150 --> 00:01:00,930
dropping a form off that form contains some amount of information that described how they wanted to

16
00:01:00,990 --> 00:01:03,750
change some data within our company.

17
00:01:03,750 --> 00:01:06,060
The form itself had a type and a payload.

18
00:01:06,360 --> 00:01:11,640
So those two steps right there a customer chopping off a form and the form itself is identical to an

19
00:01:11,670 --> 00:01:20,040
action Creator in redux and in action and action creator is a function that is going to create or return

20
00:01:20,220 --> 00:01:27,720
a plain javascript object we refer to this plain javascript object as an action an action has a type

21
00:01:27,720 --> 00:01:34,500
property and a payload property that type property on in-action describes some change that we want to

22
00:01:34,500 --> 00:01:35,910
make inside of our data.

23
00:01:36,030 --> 00:01:42,090
And then the pallete property describes some contexts around the change that we want to make the form

24
00:01:42,120 --> 00:01:46,200
that we discussed and the action are absolutely equivalent in nature.

25
00:01:46,200 --> 00:01:50,850
Remember we had said that for our insurance company we would take that form make copies of it and then

26
00:01:50,850 --> 00:01:56,010
pass it off to each different department and then it would be up to our department to look at the details

27
00:01:56,010 --> 00:02:01,720
on that form and decide how to change the data that that company or that department was maintaining.

28
00:02:01,740 --> 00:02:06,160
So the same thing is true of the action inside of the world of redux.

29
00:02:06,210 --> 00:02:12,670
The purpose of an action is to describe some change that we want to make to the data inside of our application.

30
00:02:13,500 --> 00:02:18,330
And in both cases the person dropping off the form and this action create over here the only purpose

31
00:02:18,330 --> 00:02:23,850
that they serve is to create the form or the action.

32
00:02:23,870 --> 00:02:29,660
Now after this customer dropped off the form it was given to the form receiver and the former receiver

33
00:02:29,750 --> 00:02:34,130
made copies of that form and handed it off to each department.

34
00:02:34,190 --> 00:02:39,620
That is the same purpose of what we call the dispatch function in the world of redux.

35
00:02:39,620 --> 00:02:43,110
So the dispatch function is going to take in action.

36
00:02:43,190 --> 00:02:48,770
It's going to make copies of that object and then pass it off to a bunch of different places inside

37
00:02:48,800 --> 00:02:49,990
of our application.

38
00:02:50,180 --> 00:02:52,910
And that leads us to the reducer over here.

39
00:02:52,910 --> 00:02:58,430
So remember we had said that each department essentially has its own little separate piece of data like

40
00:02:58,430 --> 00:03:04,100
a list of policies or a list of all the claims or the current accounting total like how much money we

41
00:03:04,100 --> 00:03:05,620
have in the bank so to speak.

42
00:03:05,840 --> 00:03:11,180
So each department has its own separate little separate Siskiyou is its own separate little slice of

43
00:03:11,180 --> 00:03:13,370
data inside an application.

44
00:03:13,400 --> 00:03:20,600
The same is true of our producers inside of redux in redux a reducer is a function that is responsible

45
00:03:20,660 --> 00:03:28,130
for taking in an action and some existing amount of data its going to process that action and then make

46
00:03:28,130 --> 00:03:33,740
some change to the data and then return it so that it can then be centralized in some other location.

47
00:03:33,740 --> 00:03:35,840
So the exact same thing that a department is doing.

48
00:03:35,840 --> 00:03:41,090
Remember that department took in a form it looked at the type of the form and it decided how to update

49
00:03:41,090 --> 00:03:45,920
its data reducers going to do the same thing its going to take an action look at the action look at

50
00:03:45,920 --> 00:03:53,390
its type and then based on that type decide how to update its data when a department returns some data

51
00:03:53,390 --> 00:04:01,160
or is done processing a form and then spat out some list of data or some list of current policies or

52
00:04:01,160 --> 00:04:06,740
whatever it might be on the other side and all that information was then assembled into some common

53
00:04:06,770 --> 00:04:08,350
repository of data.

54
00:04:08,390 --> 00:04:13,910
Remember that was this thing appeared this was our central repository of data that the management could

55
00:04:13,910 --> 00:04:19,130
very easily look into and get access to all of our claims history all of our policies and all of our

56
00:04:19,130 --> 00:04:20,560
accounting as well.

57
00:04:20,660 --> 00:04:26,570
And so that is the exact same purpose as the state property inside of redux and redux the state property

58
00:04:26,600 --> 00:04:32,840
is a central repository of all information that has been created by our reducers or by our department

59
00:04:32,840 --> 00:04:33,680
so to speak.

60
00:04:34,470 --> 00:04:40,530
All the information gets consolidated inside the state object so that are re-act application can very

61
00:04:40,560 --> 00:04:46,650
easily reach in to our redux application the redux side of the app and get access to all of the data

62
00:04:46,650 --> 00:04:47,940
of our application.

63
00:04:48,060 --> 00:04:52,980
And in that way our re-act up doesn't have to go around to each separate reducer or member each separate

64
00:04:52,980 --> 00:04:58,560
department and knock on the door and ask for the current list of policies or the current state so to

65
00:04:58,560 --> 00:04:59,450
speak.

66
00:04:59,850 --> 00:05:00,100
OK.

67
00:05:00,120 --> 00:05:06,290
So that is how our insurance company example maps up one to one with every step along the way here.

68
00:05:06,300 --> 00:05:10,830
Now when I just take these different concepts are these different steps of our insurance company analogy

69
00:05:11,010 --> 00:05:13,970
and try to assign them to these different pieces of the cycle.

70
00:05:13,980 --> 00:05:18,930
It still doesn't really give you a lot of context about what the ideas here are and how we actually

71
00:05:18,930 --> 00:05:21,240
write some code to make this happen.

72
00:05:21,300 --> 00:05:22,590
So let's take a quick pause here.

73
00:05:22,620 --> 00:05:26,430
When we come back the next section we're going to start to move over de-code pen and we're going to

74
00:05:26,430 --> 00:05:32,550
write out some code to model our entire insurance company and every step along the way and along that

75
00:05:32,550 --> 00:05:37,920
process you're going to see these action crater's these actions dispatch producers and state and you'll

76
00:05:37,920 --> 00:05:41,430
understand the purpose of each one of those along the flow.

77
00:05:41,430 --> 00:05:43,880
So quick pause here and we'll continue in the next video.