1

00:00:00,900  -->  00:00:06,510
When we build the reactor application we can use react to build just about any web experience we want

2

00:00:06,550  -->  00:00:06,740
right.

3

00:00:06,790  -->  00:00:13,500
We can build forms nav bars inputs buttons just about everything we want every thing you could possibly

4

00:00:13,500  -->  00:00:14,740
imagine inside the browser.

5

00:00:14,820  -->  00:00:20,160
We can probably use re-act for it but there are some very notable examples particularly for something

6

00:00:20,160  -->  00:00:22,640
very simple such as a modal.

7

00:00:22,650  -->  00:00:27,150
So today we're going to talk about modals and why they're a little bit challenging to work with inside

8

00:00:27,150  -->  00:00:31,520
of re-act application in case you're not familiar with the term modal.

9

00:00:31,530  -->  00:00:36,720
I guarantee you know what a modal is you may not know the term a modal is just a window that pops up

10

00:00:36,720  -->  00:00:37,270
to the user.

11

00:00:37,290  -->  00:00:39,360
So this is an example of the modal right here.

12

00:00:39,600  -->  00:00:44,610
Typically we'll have a kind of black background a white big window that pops up to the user and the

13

00:00:44,610  -->  00:00:47,840
Modals are just use in general for getting the user's attention.

14

00:00:47,850  -->  00:00:54,390
So say a log in form or a confirmation form or a notification just anything where we need to immediately

15

00:00:54,390  -->  00:00:57,450
get the user's attention.

16

00:00:57,450  -->  00:01:03,180
So modals are a little bit deceptively difficult to build in re-act applications so we're going to walk

17

00:01:03,180  -->  00:01:05,590
through the three stages of building a model.

18

00:01:05,610  -->  00:01:10,290
So we're going to first start with kind of a naive approach for building a modal then we're going to

19

00:01:10,290  -->  00:01:15,000
improve it a little bit kind of make it work and then we're going to improve upon that to make it work

20

00:01:15,000  -->  00:01:20,970
fantastically for reacting redux applications so we do a three step process your go from about approach

21

00:01:21,210  -->  00:01:23,610
to an ok approach to a great approach.

22

00:01:23,610  -->  00:01:25,330
So let's get started.

23

00:01:25,980  -->  00:01:28,300
Let's see that I want to build a model component.

24

00:01:28,320  -->  00:01:31,990
I want to build a motile from scratch and I want to be 100 percent reusable.

25

00:01:32,010  -->  00:01:36,990
So I expect to have an application where I've got many different types and models that need to show

26

00:01:36,990  -->  00:01:38,200
up on the screen.

27

00:01:38,640  -->  00:01:44,190
Let's see that I'll probably build a modal component and because I want it to be reusable I will give

28

00:01:44,190  -->  00:01:50,310
the motile the ability to show some child components so I can reuse this model on the fly and just swap

29

00:01:50,310  -->  00:01:54,950
out the content inside the Modahl at will whenever I want to show a modal.

30

00:01:54,990  -->  00:02:00,420
I will just place the model inside of some other component and whenever that parent component renders

31

00:02:00,690  -->  00:02:05,020
it will show the modal and boun that modal is going to pop up on the screen.

32

00:02:05,040  -->  00:02:09,560
Now the key here is that the modal really works because of CSX.

33

00:02:09,630  -->  00:02:14,070
So because of C Ss were going to use some styling to make sure that the modal pops up in the middle

34

00:02:14,070  -->  00:02:18,800
of a screen no matter where the users scroll to the application it should pop up in the very middle

35

00:02:18,800  -->  00:02:24,330
of screen and it should always have like you know some number of pixels of offset from the edges of

36

00:02:24,330  -->  00:02:25,110
the window as well.

37

00:02:25,110  -->  00:02:27,810
So you know we've got this kind of offset on here as well.

38

00:02:27,810  -->  00:02:35,730
On the top left right and bottom of the motile so because we are fantastic engineers again we're going

39

00:02:35,730  -->  00:02:37,370
to make sure that it's reusable.

40

00:02:37,530  -->  00:02:42,330
We can place any child component inside of it and the content inside the modem will get swapped out

41

00:02:42,330  -->  00:02:42,360
.

42

00:02:42,360  -->  00:02:48,360
So as a practical example the modal components self will be responsible for this kind of black overlay

43

00:02:48,640  -->  00:02:53,770
the white window and the positioning of it but then the content inside of the modal will be something

44

00:02:53,770  -->  00:02:56,000
that we should be able to easily customize on the fly.

45

00:02:56,010  -->  00:03:00,640
So which will it pass in some child's component and have it just show up inside the motile and they'll

46

00:03:00,690  -->  00:03:04,860
make it truly a reusable component of sorts.

47

00:03:04,860  -->  00:03:07,770
So let's take a look at kind of this naive approach.

48

00:03:07,800  -->  00:03:12,750
Let's see just kind of what happens when we take this kind of approach to remake a reusable component

49

00:03:12,750  -->  00:03:16,440
that is displayed inside of another component.

50

00:03:16,440  -->  00:03:19,660
I've taken the liberty of setting up a small demo application here.

51

00:03:19,680  -->  00:03:25,020
So right now we're looking at the app component and the app component has some amount of GSX inside

52

00:03:25,020  -->  00:03:28,390
of it and I've got a component called Bad modal in here.

53

00:03:28,410  -->  00:03:29,590
Right now it's commented out.

54

00:03:29,640  -->  00:03:33,690
So you I just want to show you what the application looks like when the middle is not open.

55

00:03:33,690  -->  00:03:35,440
So let's refresh.

56

00:03:35,940  -->  00:03:41,600
And so this is the app as it stands right now we just have these really weird Hello tags on here.

57

00:03:41,640  -->  00:03:44,790
The Helo's just to have something on the screen.

58

00:03:45,150  -->  00:03:46,890
You know I guess I like greeting people or something.

59

00:03:46,890  -->  00:03:53,580
But anyways the helo's are just something on the screen so I'm now going to uncomment my motile So now

60

00:03:53,580  -->  00:03:57,220
it should show up and I can refresh the page and great.

61

00:03:57,240  -->  00:03:58,420
So here's my modem.

62

00:03:58,650  -->  00:04:01,470
Notice how I've got some amount of content inside of it.

63

00:04:01,480  -->  00:04:06,980
You know this header looks like a paragraph tag and then red blue green.

64

00:04:07,050  -->  00:04:11,590
So if I go back over to my app component you'll see here's my bad model.

65

00:04:11,710  -->  00:04:16,250
There is the one there is the paragraph tag and there's the colors as well.

66

00:04:16,290  -->  00:04:23,790
And so to make this a very reusable component I can reorder the tags on the fly and boom everything

67

00:04:23,790  -->  00:04:25,050
gets reorganized as well.

68

00:04:25,050  -->  00:04:32,760
So again the modal is just the kind of vehicle it's this outline that positions itself and most importantly

69

00:04:32,850  -->  00:04:34,700
obstructs anything underneath it.

70

00:04:34,780  -->  00:04:39,150
It just grabs our users attention and we can reuse it as much as we want.

71

00:04:39,180  -->  00:04:40,650
So you have this in your thinking.

72

00:04:40,680  -->  00:04:42,170
Well Stephen this looks fine.

73

00:04:42,180  -->  00:04:43,180
Like what.

74

00:04:43,350  -->  00:04:43,830
What's the issue.

75

00:04:43,830  -->  00:04:45,070
What's wrong with this.

76

00:04:45,090  -->  00:04:46,670
Why is this about approach.

77

00:04:46,800  -->  00:04:50,530
And while you know it all I'll show you why it's about approach.

78

00:04:50,580  -->  00:04:55,380
I'm going to come over my CSSA file here and you can see that I've got some amount of styling for my

79

00:04:55,380  -->  00:04:55,780
modal.

80

00:04:55,800  -->  00:04:58,040
So this is all it takes to get a modal show up on the screen.

81

00:04:58,050  -->  00:05:02,670
I've got position fixed so it's going to show right up on the center no matter where the user is scrolled

82

00:05:02,670  -->  00:05:03,540
to.

83

00:05:03,540  -->  00:05:06,870
We've got top left right bottom a border.

84

00:05:06,870  -->  00:05:09,060
Blah blah all this kind of good stuff on here.

85

00:05:09,060  -->  00:05:11,850
Everything you get a motile to show up on the screen now.

86

00:05:11,880  -->  00:05:15,650
I've also got some z index on here as well.

87

00:05:15,660  -->  00:05:22,230
If you're not familiar with Z indexes the CSSA property Z index is used to control the rendering order

88

00:05:22,320  -->  00:05:23,500
of elements on the screen.

89

00:05:23,520  -->  00:05:30,920
So whether or not some elements should display on top of another one as you might imagine we always

90

00:05:30,930  -->  00:05:36,480
want a model to show up on top of everything else like no matter what the motile needs to be on top

91

00:05:36,480  -->  00:05:37,820
of everything else on the screen.

92

00:05:37,820  -->  00:05:41,200
It should not be obstructed by some element.

93

00:05:41,250  -->  00:05:46,500
So with the approach we have I'm going to just make some arbitrary little change here and it's going

94

00:05:46,500  -->  00:05:50,900
to uncomment this one particular rule doesn't necessarily matter what the rule is.

95

00:05:50,910  -->  00:05:54,360
You know let's just ignore that for a second and I'm going to refresh.

96

00:05:54,380  -->  00:05:57,600
And now all of a sudden boom my model is broken.

97

00:05:58,350  -->  00:06:03,650
So when we take this approach of displaying and model where the model itself is a child component like

98

00:06:03,690  -->  00:06:10,400
very down far inside the hierarchy of all my components we are almost always going to run into issues

99

00:06:10,410  -->  00:06:12,570
with z index inside of our application.

100

00:06:12,660  -->  00:06:18,000
As soon as we start adding a lot of styling we might want to add in some Zendiks to control layering

101

00:06:18,000  -->  00:06:18,240
.

102

00:06:18,240  -->  00:06:22,250
And whenever we start playing with the index you're going to start running into issues like this with

103

00:06:22,250  -->  00:06:23,190
the motile.

104

00:06:23,730  -->  00:06:29,700
If you're at all familiar with z index context stacking that's pretty much exactly what's going on here

105

00:06:29,690  -->  00:06:30,040
.

106

00:06:30,060  -->  00:06:31,140
I've got a.

107

00:06:31,280  -->  00:06:34,750
The motile is contained within the right div..

108

00:06:34,760  -->  00:06:37,030
And then I've also got a left there as well.

109

00:06:37,230  -->  00:06:43,830
The right Dave has a z index of one which means the right div and everything inside of it will kind

110

00:06:43,830  -->  00:06:50,660
of have a z index of one as a parent context left is going to be z index of three which means everything

111

00:06:50,670  -->  00:06:54,430
inside of the left div is going to display on top of the right.

112

00:06:54,560  -->  00:06:55,960
And so that's what we're seeing here.

113

00:06:55,980  -->  00:07:01,940
This is the left div and it's displaying on top of the right div which is this list of Helo's over here

114

00:07:01,990  -->  00:07:03,560
and also the middle as well.

115

00:07:03,840  -->  00:07:05,990
So that's a little bit getting a little bit into the weeds here.

116

00:07:06,000  -->  00:07:11,430
But the reality here is that when we take this approach of showing a modal in a reactor application

117

00:07:11,490  -->  00:07:17,520
we are always going to run into issues with z index where the modal is not going to end up being the

118

00:07:17,510  -->  00:07:19,220
top Complan on the screen.

119

00:07:19,230  -->  00:07:20,030
So how do we fix this.

120

00:07:20,040  -->  00:07:21,710
You know again this is like Stage 1.

121

00:07:21,780  -->  00:07:23,050
It's a naive approach.

122

00:07:23,060  -->  00:07:26,610
It can get a modal on screen but at some point in time it's going to break and things are not going

123

00:07:26,610  -->  00:07:27,210
to work well.

124

00:07:27,210  -->  00:07:29,230
So how do you know how might we fix this.

125

00:07:29,630  -->  00:07:33,270
Well let's look at another approach here.

126

00:07:33,260  -->  00:07:36,790
Now this looks a bit crazy so just bear with me for a little bit.

127

00:07:36,840  -->  00:07:42,890
This is going to step two for approaching this model is give me like are kind of a good solution.

128

00:07:43,130  -->  00:07:49,200
We're going to have a root component but the root component remember is always displayed within document

129

00:07:49,310  -->  00:07:49,700
bodies.

130

00:07:49,710  -->  00:07:53,160
So inside of all very small documents we always have a body tag.

131

00:07:53,430  -->  00:07:57,480
And that's where we usually are going to at some point in time place or root component.

132

00:07:57,480  -->  00:08:02,880
Now the problem with our modem as it stands right now is that the motile is nested inside of our component

133

00:08:02,900  -->  00:08:03,920
hierarchy.

134

00:08:03,960  -->  00:08:06,110
So here's where we're going to do to fix this.

135

00:08:06,140  -->  00:08:11,220
We're going to make a new component which we're going to kind of think of as like a fake modem of sorts

136

00:08:11,220  -->  00:08:11,660
.

137

00:08:11,880  -->  00:08:18,080
The fake modal whenever it gets rendered to the screen is going to reach back up to document dot body

138

00:08:18,210  -->  00:08:23,520
and forcibly render a brand new component as a child to document our body.

139

00:08:23,550  -->  00:08:29,230
And so this is really breaking re-asked Convention right here in a big way right in reaction applications

140

00:08:29,240  -->  00:08:34,220
where we have a root component and everything else is a child of that root component.

141

00:08:34,230  -->  00:08:38,210
So what I'm suggesting here is we kind of break that convention and we say that whenever we want to

142

00:08:38,460  -->  00:08:44,700
display a model we should create a new element or a new component and append append it directly to document

143

00:08:44,880  -->  00:08:45,880
body.

144

00:08:45,920  -->  00:08:50,930
Now that it's a child of body we will not have any more stacking Zendiks issues.

145

00:08:50,930  -->  00:08:55,050
So this Modal will always show up 100 percent of the time.

146

00:08:55,500  -->  00:08:56,510
So the fake model here.

147

00:08:56,520  -->  00:09:00,450
And this is the key the fake modal is going to create the modal undocumented body.

148

00:09:00,480  -->  00:09:05,360
So this diagram kind of communicates what's going on but still a little bit rough.

149

00:09:05,370  -->  00:09:09,910
So let's do a written code example to see what's going on here.

150

00:09:09,990  -->  00:09:14,390
Back inside my code editor I'm going to make a new component and I'm going to call this one just modal

151

00:09:15,460  -->  00:09:22,060
and then we're going to put some boiler plate inside of here.

152

00:09:22,430  -->  00:09:29,450
We're going to take re-acting component from react and bring in react Daum from react.

153

00:09:29,820  -->  00:09:31,570
And I think that's good for now.

154

00:09:31,640  -->  00:09:39,760
Let's make our middle class Ilkeston components now in sight if you're

155

00:09:43,290  -->  00:09:50,600
inside of this motile rather than returning like you know a dish that has some fancy CSSA styling on

156

00:09:50,610  -->  00:09:53,110
it or any children or anything like that.

157

00:09:53,120  -->  00:09:58,990
I'm just going to return a no script tags so no script basically means render nothing.

158

00:09:59,000  -->  00:10:00,490
You know don't don't show anything.

159

00:10:00,780  -->  00:10:05,970
So when we display the modal component it is not going to put it's not going to play anything on the

160

00:10:05,970  -->  00:10:08,650
screen whatsoever nothing will be displayed for the modem.

161

00:10:08,690  -->  00:10:13,040
So you might be thinking well how do we actually get this Modal on the screen right where it like where

162

00:10:13,050  -->  00:10:14,110
does that happen.

163

00:10:14,490  -->  00:10:17,960
So the answer is that we're going to kind of do a little bit of a work around here.

164

00:10:18,000  -->  00:10:19,430
I'm going to add in a component

165

00:10:22,220  -->  00:10:24,000
did.

166

00:10:24,620  -->  00:10:29,960
So whenever this component gets mounted to the screen never gets rendered to the screen I'm going to

167

00:10:29,960  -->  00:10:31,700
create a new div.

168

00:10:31,700  -->  00:10:33,830
So I'm just like a floating div in memory

169

00:10:36,680  -->  00:10:41,900
and I'm going to sign it to this dot modal targets.

170

00:10:41,900  -->  00:10:44,110
Now here's where some of the magic doesn't come into play.

171

00:10:44,110  -->  00:10:46,810
I going to write out some the code and we'll talk about what's going on.

172

00:10:47,210  -->  00:10:56,130
I'm going to add on a class name to the modal target of modal and then this is where the magic is going

173

00:10:56,130  -->  00:10:58,670
to take this div that we just created

174

00:11:01,330  -->  00:11:03,560
and append it to the body tag and my document

175

00:11:08,930  -->  00:11:13,400
and then going to Colinet they called this dot underscore render.

176

00:11:13,400  -->  00:11:14,060
So let's see what.

177

00:11:14,060  -->  00:11:15,500
Underscore rendered does.

178

00:11:15,680  -->  00:11:23,200
So inside of underscore render I'm going to take my react on library and inside here.

179

00:11:23,240  -->  00:11:24,380
We're going to render

180

00:11:27,530  -->  00:11:37,370
a div that contains this prop's start children and we're going to render it into get a new line here

181

00:11:37,370  -->  00:11:40,870
.

182

00:11:41,780  -->  00:11:44,010
This dot modal target.

183

00:11:44,030  -->  00:11:45,590
OK so this is kind of the magic here.

184

00:11:45,590  -->  00:11:47,900
This is this is how we're going to make this work.

185

00:11:47,930  -->  00:11:52,970
Whenever my modal component gets rendered to the screen I'm going to create a new device so just like

186

00:11:52,970  -->  00:11:58,550
a floating div out of thin air I'm going to append it to document body so it gets appended to the body

187

00:11:58,550  -->  00:12:06,800
tag inside of my application and then I'm going to use react Dom to render this dot start children to

188

00:12:06,950  -->  00:12:09,980
that new div that just got into the body.

189

00:12:09,980  -->  00:12:15,620
So this got props such children in case you've never used props children before is a reference to any

190

00:12:15,620  -->  00:12:17,880
components to get past into my component.

191

00:12:17,960  -->  00:12:26,990
So in this case bad modal would have gotten the H-1 the tag and colors as props start children.

192

00:12:27,020  -->  00:12:29,480
Now step two is whenever

193

00:12:32,720  -->  00:12:37,310
the components about to update we'll do another render as well.

194

00:12:37,310  -->  00:12:42,020
And so this renders and make sure that if we get a new set of components or a new set of children inside

195

00:12:42,020  -->  00:12:47,330
the model we're going to render those to the parent did as well.

196

00:12:47,330  -->  00:12:47,930
And finally

197

00:12:52,130  -->  00:12:56,990
we'll do a little bit of cleanup whenever the component is about to unmount from the screen we'll call

198

00:12:56,990  -->  00:12:57,740
re-act arm.

199

00:12:57,800  -->  00:13:01,420
Unmount component at node.

200

00:13:01,990  -->  00:13:03,600
This dot motile target.

201

00:13:03,620  -->  00:13:10,430
So this will unmount the stop process of children that we already rendered and we will also document

202

00:13:10,430  -->  00:13:15,710
dog body dog remove child stop motile target as well.

203

00:13:15,710  -->  00:13:19,250
And so this component will amount it's just a little bit of cleanup in here to make sure that we clean

204

00:13:19,250  -->  00:13:24,490
up the dorm whenever the motile is about to be removed from the component hierarchy.

205

00:13:24,820  -->  00:13:33,310
OK so let's now import this motile into apps and now we're going to import motile.

206

00:13:33,380  -->  00:13:37,760
And then instead of displaying bad motile will display motile.

207

00:13:38,700  -->  00:13:40,480
Let's give us a shot.

208

00:13:40,490  -->  00:13:45,880
So now when we refresh the page it looks like everything shows up well kind of.

209

00:13:45,890  -->  00:13:46,370
Right.

210

00:13:46,400  -->  00:13:47,240
Kind of.

211

00:13:47,240  -->  00:13:52,040
I've got an error message here and it says could not find store in either context.

212

00:13:52,040  -->  00:13:56,060
But the wall is kind of good stuff in here and so this is where right now we're kind of at step two

213

00:13:56,060  -->  00:14:00,530
where we've got a model that shows up on top of everything but it still doesn't quite work all the way

214

00:14:00,530  -->  00:14:00,600
.

215

00:14:00,620  -->  00:14:03,990
You can make just one quick change.

216

00:14:05,100  -->  00:14:06,580
And OK we're good to go now.

217

00:14:06,860  -->  00:14:10,940
So we're definitely at step two here where we're getting a motile to show up on the screen.

218

00:14:10,970  -->  00:14:13,010
But we still got an error message on there.

219

00:14:13,220  -->  00:14:15,940
So I've got this colour's component right here.

220

00:14:15,950  -->  00:14:16,850
The color component.

221

00:14:16,850  -->  00:14:18,710
Let's open that up.

222

00:14:18,950  -->  00:14:22,870
You'll see that colors is a redux connected component.

223

00:14:22,880  -->  00:14:23,840
So it is a container.

224

00:14:23,840  -->  00:14:26,750
It makes access to the redux store.

225

00:14:26,750  -->  00:14:30,240
I'm going to I've got it uncommented now back inside of app.

226

00:14:30,290  -->  00:14:34,310
Let's do a refresh again and check out that error message again.

227

00:14:34,520  -->  00:14:39,200
So the error message says cannot find store on either contacts or props of connect colors.

228

00:14:39,200  -->  00:14:44,460
We need to wrap the root component in a provider or explicitly Pastore as a prop to connect colors.

229

00:14:44,480  -->  00:14:50,100
So what this is essentially saying right here is that we are trying to render a.

230

00:14:50,780  -->  00:14:51,920
Let's pull it up here.

231

00:14:51,920  -->  00:14:57,920
We are trained to render a connected component or a container like over here.

232

00:14:57,920  -->  00:15:00,910
Apart from everything else inside of a reata application.

233

00:15:01,610  -->  00:15:06,380
If you've ever worked with the connect help or from re-act redux at all you may know that the connect

234

00:15:06,380  -->  00:15:11,160
helper works in tandem with the provider tag that we place inside of our root component.

235

00:15:11,420  -->  00:15:16,840
So back inside of my top level index dot JS number I got this provider tag right here.

236

00:15:17,150  -->  00:15:22,010
Whenever we place a connected component that connected component is making direct communication with

237

00:15:22,010  -->  00:15:23,390
this provider tag.

238

00:15:23,390  -->  00:15:27,770
So essentially you know can I get in the weeds here again essentially what's going on here is we've

239

00:15:27,770  -->  00:15:33,860
got this disconnected hierarchy where my Chao's component is trying to get access to that provider tag

240

00:15:34,250  -->  00:15:36,710
but the provider tag is not in the same hierarchy.

241

00:15:36,710  -->  00:15:39,670
The provider tag is like you know over here.

242

00:15:40,250  -->  00:15:45,020
And so the child component is trying to get access to the provider but because their income different

243

00:15:45,030  -->  00:15:49,880
hierarchies the child component can't get access to the provider it can't get access to the store.

244

00:15:49,880  -->  00:15:51,810
And so it throws the error that we see.

245

00:15:52,250  -->  00:15:56,160
So let's move on to Step Three Step three here.

246

00:15:56,220  -->  00:16:04,600
This is specifically to make a model work with a redux application in our D-flat application.

247

00:16:04,640  -->  00:16:07,630
Again we've got this kind of provider over here on the left hand side.

248

00:16:07,670  -->  00:16:09,850
It's always there it's part of the boilerplate.

249

00:16:10,070  -->  00:16:15,850
So to fix our set up here we're going to add a nother provider tag inside of the motile.

250

00:16:16,070  -->  00:16:20,780
So there is going to import the provider helper will provide our store to that provider.

251

00:16:20,900  -->  00:16:25,780
And then any child component that needs access to the retail store will have access to the provider

252

00:16:25,780  -->  00:16:26,680
as well.

253

00:16:26,690  -->  00:16:29,830
So let's give that a shot as well.

254

00:16:29,960  -->  00:16:37,500
The first thing I'm going to do is over in motile at the very top We're going to import store.

255

00:16:37,550  -->  00:16:48,530
So this is the instance of my redux store from index and then I'll also import provider from re-act

256

00:16:48,530  -->  00:16:50,600
redux as well.

257

00:16:50,720  -->  00:16:55,880
Now inside of my re-act render call I can add my provider

258

00:16:59,420  -->  00:17:00,390
like so.

259

00:17:00,640  -->  00:17:05,360
And as a prop I'll pass in the store that I am in port as well.

260

00:17:05,360  -->  00:17:11,030
So let's do a refresh now and we can see everything successfully shows up on the screen.

261

00:17:11,060  -->  00:17:12,870
So if you've ever worked with.

262

00:17:12,970  -->  00:17:18,850
Just a quick side note if you ever worked with the NPM library react redux or has me react to motile

263

00:17:18,850  -->  00:17:19,060
.

264

00:17:19,190  -->  00:17:23,870
This is very similar to how re-act library works.

265

00:17:23,870  -->  00:17:30,440
But note that that library is going to break if you're using redux because if you try to use connected

266

00:17:30,440  -->  00:17:34,850
component inside the motile it does not provide this provider tag there and so you're going to have

267

00:17:34,850  -->  00:17:35,850
a little bit of issue in there.

268

00:17:35,870  -->  00:17:39,050
So to something to be aware of.

269

00:17:39,350  -->  00:17:42,840
So at this point in time we are now on to Step Three of our application.

270

00:17:42,950  -->  00:17:47,950
We have successfully decoupled our model from the rest of our rendered tree.

271

00:17:47,990  -->  00:17:52,400
So the motile shows up as a child to document dump body and that means everything is always going to

272

00:17:52,400  -->  00:17:56,390
render on the screen appropriately because we don't have to worry about z index when the modem is a

273

00:17:56,390  -->  00:17:59,890
direct descendant or direct child of document body.

274

00:17:59,930  -->  00:18:05,210
We also fix up our child's component to work with redox by also inserting another copy of our provider

275

00:18:05,300  -->  00:18:06,970
inside of the modem as well.

276

00:18:07,400  -->  00:18:13,940
So I know it's been a lot of work a lot of very technical terms in this in this video but again displaying

277

00:18:13,940  -->  00:18:19,270
modals is something that is not inherently super easy and or react and especially redux applications

278

00:18:19,270  -->  00:18:24,590
so I hope this is help to shed a little bit of light on what goes on behind the scenes.

279

00:18:25,220  -->  00:18:31,070
If you've enjoyed this video I publish weekly videos on re-act redux like everything javascript topics

280

00:18:31,370  -->  00:18:36,670
you can check out more videos at reli coating dot com and you can also check out the code for this example

281

00:18:36,680  -->  00:18:37,670
there as well.

282

00:18:37,730  -->  00:18:41,350
So I hope to see you next week where we're going to cover another exciting topic.

283

00:18:41,390  -->  00:18:42,620
I'll catch you later.