1
00:00:01,620 --> 00:00:06,210
We've got a great collection of reusable components, such as our code editor, the preview window,

2
00:00:06,390 --> 00:00:07,520
very sizable stuff.

3
00:00:07,740 --> 00:00:09,780
We've got our text editor put together as well.

4
00:00:09,810 --> 00:00:11,670
So really good on the side.

5
00:00:11,880 --> 00:00:16,440
But all these different components are still making use of local components state.

6
00:00:16,800 --> 00:00:18,720
So we're going to start to change that inside the section.

7
00:00:18,930 --> 00:00:21,030
We're going to start to add in Redox to our app.

8
00:00:21,480 --> 00:00:26,790
We're going to have Redox handle and behave as a central store of all these different cells and eventually

9
00:00:27,090 --> 00:00:30,930
handle the creation of all these different bundles for all the different code cells as well.

10
00:00:31,770 --> 00:00:35,490
The first thing we need to do is come up with some design for our reduc store.

11
00:00:35,950 --> 00:00:39,630
Let's sit down and took a quick stab at one way that we might put this all together.

12
00:00:40,360 --> 00:00:44,040
So I think that our Redock store should probably have two separate reducers.

13
00:00:44,340 --> 00:00:46,980
One will be called cells and the other will be called bundles.

14
00:00:47,670 --> 00:00:53,190
Cells is going to have a listing of all the different cells in a text cell or a code cell that we want

15
00:00:53,190 --> 00:00:56,090
to display on the screen inside the cells reducer.

16
00:00:56,100 --> 00:00:58,530
We're going to have a couple of different properties being maintained.

17
00:00:59,580 --> 00:01:03,990
We're going to have, of course, data, so that's going to be some kind of collection of all the different

18
00:01:03,990 --> 00:01:04,709
cells we have.

19
00:01:05,190 --> 00:01:09,630
We're going to have all of our different code cells and all the different tech cells kind of commingling

20
00:01:09,630 --> 00:01:10,670
inside this data thing.

21
00:01:12,150 --> 00:01:17,310
Well, then have a loading flag and an air flag, we are going to eventually allow a user to save this

22
00:01:17,310 --> 00:01:21,350
list of cells and fetch a list of cells from a remote API.

23
00:01:21,400 --> 00:01:24,660
I say remote, but it is technically going to be hosted on a user's machine.

24
00:01:25,710 --> 00:01:30,930
So this API is going to allow us to fetch and save cells, so of course we're going to have loading

25
00:01:30,930 --> 00:01:36,630
and er just reflect our loading attempt and er just to handle any errors that come along during that

26
00:01:36,630 --> 00:01:38,150
saving or fetching process.

27
00:01:39,070 --> 00:01:43,690
The order of cells inside of rap also is really important, we always want to make sure that we reflect

28
00:01:43,690 --> 00:01:48,790
the exact order in some way and always say, OK, we want this Texel first, then this code spelled

29
00:01:48,790 --> 00:01:50,050
in this Texel and so on.

30
00:01:50,620 --> 00:01:52,630
So we're going to have a separate order property.

31
00:01:52,780 --> 00:01:54,520
That's going to be an array of strings.

32
00:01:54,880 --> 00:01:57,880
This array of strings is going to be really an array of the order of.

33
00:01:58,920 --> 00:02:03,450
Cells that we have, so each of these strings are going to be the IDs of each individual cell.

34
00:02:04,670 --> 00:02:08,660
If that part is confusing, don't sweat it, we're going to, of course, go into great detail.

35
00:02:09,650 --> 00:02:14,780
Then separate from our cells reducer, we'll also have bundles, so bundles is going to be reducer that

36
00:02:14,780 --> 00:02:21,230
holds the bundled output from every code cell, that's pretty much it will go into more detail on bundles,

37
00:02:21,230 --> 00:02:23,100
of course, once we start putting that part together.

38
00:02:23,870 --> 00:02:27,980
Now, in addition to these two reducers, we will, of course, also have a variety of different action

39
00:02:27,980 --> 00:02:28,640
creators.

40
00:02:29,120 --> 00:02:33,710
So we'll have update cell, which will be called whenever user types inside of a text cell or code cell

41
00:02:34,370 --> 00:02:38,990
delete cell whenever user attempts to delete a cell insert cell before.

42
00:02:39,020 --> 00:02:41,960
Or we might also name this insert cell after.

43
00:02:42,320 --> 00:02:47,180
So the reason this is called insert cell before or after is remember, we want to allow a user to insert

44
00:02:47,180 --> 00:02:49,490
new cells between existing ones.

45
00:02:49,760 --> 00:02:55,130
So we need to somehow provide some reference and say after the cell with ID, one, two, three, add

46
00:02:55,130 --> 00:02:56,330
in a new text cell.

47
00:02:56,450 --> 00:02:58,070
That's going to be the goal of the section creator.

48
00:02:59,100 --> 00:03:05,910
Mousel To reorder cells, so we want to maybe move a cell up in the listing or down in the listing and

49
00:03:05,910 --> 00:03:11,550
then fetch cells that will of course allow a user to fetch an existing list of cells from this local

50
00:03:11,550 --> 00:03:13,400
API that we're going to eventually put together.

51
00:03:15,050 --> 00:03:20,570
Now, this diagram is only showing our two reducers and our action creators, but we are, of course,

52
00:03:20,570 --> 00:03:27,050
also going to create a whole variety of different action types and also action interfaces as well to

53
00:03:27,050 --> 00:03:30,850
support these action creators as they get processed by all the different reducers.

54
00:03:31,280 --> 00:03:35,840
So it's pretty much the exact same structure from kind of a type standpoint or type script standpoint

55
00:03:35,960 --> 00:03:39,170
as what we put together on our previous redox application.

56
00:03:39,170 --> 00:03:42,740
In this course, everything exact same pattern, nothing really different.

57
00:03:43,070 --> 00:03:46,820
The only big difference here is that, of course, we're going to have many more action creators, a

58
00:03:46,820 --> 00:03:49,250
lot more stuff going on inside of our reduc store and so on.

59
00:03:50,060 --> 00:03:52,400
OK, so that we understand our general pattern.

60
00:03:52,580 --> 00:03:55,950
Let's very quickly install a couple of dependencies into our project.

61
00:03:56,570 --> 00:03:57,710
So over at my terminal.

62
00:03:59,720 --> 00:04:01,460
We will do an NPM install.

63
00:04:02,740 --> 00:04:10,390
Dash to save exact, we'll get at type's react redux at seven one one five.

64
00:04:11,460 --> 00:04:15,510
We will get react redux at seven to two.

65
00:04:16,829 --> 00:04:19,620
Redux at four zero five.

66
00:04:21,029 --> 00:04:25,590
Redux plunk at two three zero.

67
00:04:26,460 --> 00:04:30,180
And then finally, we'll just go ahead and install Axios right now, we're not going to use it right

68
00:04:30,180 --> 00:04:32,450
away, but we'll just kind of put it in place.

69
00:04:32,490 --> 00:04:36,840
There's a lot of infrastructure we have to put in before we even start thinking about making use of

70
00:04:36,840 --> 00:04:37,230
Axios.

71
00:04:37,230 --> 00:04:39,000
But whatever, we'll just install it right now.

72
00:04:39,310 --> 00:04:43,200
It'll do Axios at zero to one one.

73
00:04:44,260 --> 00:04:46,630
OK, so that should be it, I'll go ahead and run that.

74
00:04:47,500 --> 00:04:51,730
As usual, this will take a minute or two, so we'll take a quick break here and then start to wire

75
00:04:51,730 --> 00:04:53,740
up all this rock stuff in the next video.