1
00:00:00,970 --> 00:00:05,080
Now that we've had a very long academic and dry discussion, let's take a look at how we're going to

2
00:00:05,080 --> 00:00:06,790
actually implement all this Bundall stuff.

3
00:00:07,330 --> 00:00:11,650
OK, so this diagram is going to be a little bit crazy, but a lot of the stuff inside of your trust

4
00:00:11,650 --> 00:00:14,350
me, you already understand it's on the left hand side.

5
00:00:14,350 --> 00:00:16,570
We've got our reduc store inside of our store.

6
00:00:16,570 --> 00:00:17,680
Is these cells reducer?

7
00:00:18,160 --> 00:00:21,280
Two pieces of state inside of there are data and order.

8
00:00:21,970 --> 00:00:26,680
So we're going to take those two pieces of state which we're already doing, wire them up with a selector

9
00:00:26,680 --> 00:00:30,760
and provide an ordered list of cells to our cell list components the cell.

10
00:00:30,760 --> 00:00:34,870
This component is then going to generate some number of cell list item components.

11
00:00:35,110 --> 00:00:37,870
And internally, those might show a code cell.

12
00:00:38,710 --> 00:00:42,790
That's where things start to get a little bit interesting inside of these code cells.

13
00:00:42,850 --> 00:00:46,830
We're going to leave in some logic inside there around that bouncing stuff.

14
00:00:47,320 --> 00:00:53,020
So we're going to say that if the code belonging to a cell is unchanged for seven hundred and fifty

15
00:00:53,020 --> 00:00:57,490
milliseconds, when I say code right there, I'm talking about whatever user typed in and we're going

16
00:00:57,490 --> 00:01:01,960
to take that code and call a bundle cell action creator with it.

17
00:01:02,590 --> 00:01:06,910
We are going to make an action creator that is going to be responsible for bundling all the code from

18
00:01:06,910 --> 00:01:07,360
a cell.

19
00:01:08,740 --> 00:01:13,960
When we initially call this action creator, we're going to immediately dispatch an action of type bundle

20
00:01:13,960 --> 00:01:18,490
start that is going to be a signal that we are starting up the bundling process for some particular

21
00:01:18,490 --> 00:01:18,850
cell.

22
00:01:19,330 --> 00:01:24,880
And we will be able to use that, for example, to maybe show a loading bar or a progress bar for a

23
00:01:24,880 --> 00:01:25,680
particular cell.

24
00:01:26,260 --> 00:01:30,040
We might want to show a progress bar if it ever takes a long time to complete a bundle.

25
00:01:30,040 --> 00:01:35,200
And that's entirely possible if a user tries to import some kind of NPM module that is rather large.

26
00:01:35,200 --> 00:01:38,980
And that might just take a couple of seconds for us to actually download and bundle everything.

27
00:01:40,290 --> 00:01:45,360
Then when the bundle is created by the bundle cell action creator, we will then dispatch an action

28
00:01:45,360 --> 00:01:50,250
of type bundle complete and inside of that action will be the result of the bundle.

29
00:01:50,520 --> 00:01:54,920
So all the code coming out of the bundle and any possible heirs, it might have occurred as well.

30
00:01:56,000 --> 00:02:00,620
So we're going to receive both these action types or both really those actions, actions that have those

31
00:02:00,620 --> 00:02:05,510
types inside of our bundles reducer, we'll use that to update some piece of state.

32
00:02:06,480 --> 00:02:10,590
Inside there, we'll figure out the structure of the state, but it will probably be some kind of object

33
00:02:10,620 --> 00:02:16,500
where the keys are, these idea of a cell and the value will be the output of the bundle or something

34
00:02:16,500 --> 00:02:16,920
like that.

35
00:02:17,730 --> 00:02:22,380
And it will take that piece of state and somehow communicate it back over to our code cell component.

36
00:02:22,830 --> 00:02:28,530
And our code cell component can then communicate the output of the bundle down into the preview component.

37
00:02:29,250 --> 00:02:30,100
And that's pretty much it.

38
00:02:30,120 --> 00:02:31,410
That is the entire flow.

39
00:02:32,220 --> 00:02:36,180
You'll notice here that we're not really doing anything too crazy just because we don't have to know

40
00:02:36,180 --> 00:02:37,020
real requirements.

41
00:02:37,840 --> 00:02:42,210
So we were just relying upon our action creator to do the actual bundling process.

42
00:02:42,630 --> 00:02:48,000
We're going to see the start and complete and eventually get the results over to our bundles reducer.

43
00:02:49,060 --> 00:02:52,870
All right, so now that we've got this overview, quick pause right here and start with our implementation

44
00:02:52,870 --> 00:02:53,650
in just a moment.