1 00:00:01,110 --> 00:00:02,130 Instructor: In the last section we spoke 2 00:00:02,130 --> 00:00:04,770 about how our commentbox.test.js file is 3 00:00:04,770 --> 00:00:08,189 currently breaking because our comment box is being rendered 4 00:00:08,189 --> 00:00:11,220 inside that test file without a redux store 5 00:00:11,220 --> 00:00:13,780 or a provider tag in its component hierarchy. 6 00:00:13,780 --> 00:00:16,260 Now at the end of that section, I had said we 7 00:00:16,260 --> 00:00:18,420 were gonna put some new helper code directly inside 8 00:00:18,420 --> 00:00:19,560 of our index.js file. 9 00:00:19,560 --> 00:00:22,350 We're gonna make a little change to that and we're 10 00:00:22,350 --> 00:00:25,620 going to instead create a new file called root.js. 11 00:00:25,620 --> 00:00:27,840 The reason that we're gonna do this is just to make the code 12 00:00:27,840 --> 00:00:29,730 that we're gonna write a little bit more clear 13 00:00:29,730 --> 00:00:32,130 for you just to understand exactly what's going on. 14 00:00:32,130 --> 00:00:34,290 So just a little bit of a change there. 15 00:00:34,290 --> 00:00:35,123 So let's get to it. 16 00:00:35,123 --> 00:00:36,140 We're gonna first get started 17 00:00:36,140 --> 00:00:38,330 by making this root.js file. 18 00:00:38,330 --> 00:00:41,340 We're gonna make the file and I'll very quickly figure 19 00:00:41,340 --> 00:00:43,590 out exactly what's gonna happen inside there. 20 00:00:44,460 --> 00:00:46,680 So inside my SRC directory 21 00:00:46,680 --> 00:00:50,920 I'm gonna make a new file called root.js 22 00:00:50,920 --> 00:00:53,910 and inside of here we're going to create 23 00:00:53,910 --> 00:00:57,600 and export a component that creates our provider tag 24 00:00:57,600 --> 00:00:59,070 and our Redux store. 25 00:00:59,070 --> 00:01:00,570 So we're not gonna put this logic 26 00:01:00,570 --> 00:01:02,740 inside the index.js file anymore. 27 00:01:02,740 --> 00:01:04,800 We're gonna play to sit all inside 28 00:01:04,800 --> 00:01:08,040 of root.js and then the index.js file 29 00:01:08,040 --> 00:01:10,650 and all of our component tests will make use 30 00:01:10,650 --> 00:01:12,940 of this new root.js thing. 31 00:01:12,940 --> 00:01:15,270 Let's write out the code and then you'll very quickly go 32 00:01:15,270 --> 00:01:17,640 to good idea of what's going on. 33 00:01:17,640 --> 00:01:21,000 So to get started, I'm going to flip on over 34 00:01:21,000 --> 00:01:24,180 to my root.js file and I'm gonna import a couple 35 00:01:24,180 --> 00:01:27,300 of different functions from a few different libraries. 36 00:01:27,300 --> 00:01:32,300 So it'll import the provider tag from React Redux. 37 00:01:34,560 --> 00:01:39,560 I will import Create Store from Redux. 38 00:01:39,870 --> 00:01:43,200 I will import our reducers from Reducers. 39 00:01:43,200 --> 00:01:44,140 And at the very top 40 00:01:44,140 --> 00:01:49,023 let's not forget to import React from React as well. 41 00:01:49,990 --> 00:01:52,140 It's now down at the bottom of the file. 42 00:01:52,140 --> 00:01:52,973 I will create 43 00:01:52,973 --> 00:01:57,250 and export a new functional React component like so. 44 00:02:01,620 --> 00:02:05,220 So inside this thing I'm gonna create a provider tag. 45 00:02:05,220 --> 00:02:10,220 Again, I'm gonna pass it a store prop of create store 46 00:02:11,060 --> 00:02:14,493 with our reducers and an empty state object. 47 00:02:15,420 --> 00:02:18,420 I'll then close off the provider tag and then here's where 48 00:02:18,420 --> 00:02:19,680 things get a little bit crazy. 49 00:02:19,680 --> 00:02:21,630 Okay, here's the confusing part. 50 00:02:21,630 --> 00:02:24,870 This is a React component right here that we are creating. 51 00:02:24,870 --> 00:02:27,020 So as a React component, it will be called 52 00:02:27,020 --> 00:02:29,386 with a props object. 53 00:02:29,386 --> 00:02:31,570 Inside of the provider tag right here, 54 00:02:31,570 --> 00:02:34,620 we're gonna place a set of curly braces to say 55 00:02:34,620 --> 00:02:37,020 that we're gonna make a JavaScript expression inside 56 00:02:37,020 --> 00:02:41,120 of here, and then we will reference props.children 57 00:02:41,120 --> 00:02:42,093 like so. 58 00:02:43,740 --> 00:02:45,690 And you'll notice that I'm getting 59 00:02:45,690 --> 00:02:46,560 an error message right here. 60 00:02:46,560 --> 00:02:48,120 I did not close off my provider tag. 61 00:02:48,120 --> 00:02:48,953 There we go. 62 00:02:48,953 --> 00:02:49,786 Much better. 63 00:02:50,850 --> 00:02:54,719 Okay, so now let me reformat this really quickly. 64 00:02:54,719 --> 00:02:55,730 There we go. 65 00:02:55,730 --> 00:02:58,650 So now anytime we create an instance of this root 66 00:02:58,650 --> 00:03:01,100 component, we're gonna create our provider tag 67 00:03:01,100 --> 00:03:04,020 and create our Redux store at the same time. 68 00:03:04,020 --> 00:03:05,910 Now, the props.children thing right here 69 00:03:05,910 --> 00:03:09,300 is a React construct or it's a feature of React. 70 00:03:09,300 --> 00:03:11,910 If you've never made use of props.children before 71 00:03:11,910 --> 00:03:14,510 it allows us to take this component we just created 72 00:03:14,510 --> 00:03:17,420 and use it to wrap other components. 73 00:03:17,420 --> 00:03:20,990 So let's get a quick demonstration of how this is now used. 74 00:03:20,990 --> 00:03:24,540 I'm gonna flip back over to my index.js file. 75 00:03:24,540 --> 00:03:26,100 Now inside of here we've got all 76 00:03:26,100 --> 00:03:29,730 of our imports for provider Create store and reducers. 77 00:03:29,730 --> 00:03:31,890 We don't need any of that anymore cuz we are going 78 00:03:31,890 --> 00:03:34,820 through all that work inside the root.js file. 79 00:03:34,820 --> 00:03:38,550 So I'm gonna delete the import for provider create store 80 00:03:38,550 --> 00:03:42,120 and reducers, and then I will replace it 81 00:03:42,120 --> 00:03:45,663 with an import for the root component that we just created. 82 00:03:48,030 --> 00:03:50,520 Now inside the ReactDOM.render call 83 00:03:50,520 --> 00:03:54,700 I will replace the provider tag with root like so. 84 00:03:57,910 --> 00:03:59,750 Okay, so now what's going on? 85 00:03:59,750 --> 00:04:01,640 When our application first starts up 86 00:04:01,640 --> 00:04:03,960 it's going to try to render an instance 87 00:04:03,960 --> 00:04:05,970 of the root component 88 00:04:05,970 --> 00:04:10,800 and the app component will be passed to the root as a child. 89 00:04:10,800 --> 00:04:12,630 So when the root component gets rendered 90 00:04:12,630 --> 00:04:14,890 it will receive this app component 91 00:04:15,840 --> 00:04:19,199 on the props property of props.children. 92 00:04:19,199 --> 00:04:20,370 So you can kind of imagine 93 00:04:20,370 --> 00:04:23,480 that this code right here is a hundred percent equivalent 94 00:04:23,480 --> 00:04:26,640 to saying that right there. 95 00:04:26,640 --> 00:04:29,250 So we just take props.children, which is a reference 96 00:04:29,250 --> 00:04:30,990 to the app component that we just created 97 00:04:30,990 --> 00:04:34,203 inside that other file and it will display it right here. 98 00:04:35,190 --> 00:04:37,950 So in total, what this root.js component does 99 00:04:37,950 --> 00:04:40,020 is it allows us to create a provider tag 100 00:04:40,020 --> 00:04:44,580 with the Redux store and on the fly we can swap 101 00:04:44,580 --> 00:04:47,610 out the component that is gonna be placed 102 00:04:47,610 --> 00:04:49,110 inside the provider tag. 103 00:04:49,110 --> 00:04:51,687 So now we can still use this provider tag 104 00:04:51,687 --> 00:04:55,860 and our Redux store for powering our very real application 105 00:04:55,860 --> 00:04:59,360 but we can now flip on over to our comment box. 106 00:04:59,360 --> 00:05:02,490 And now over here where we create our comment box file 107 00:05:02,490 --> 00:05:04,680 inside the commentbox.test, or excuse me 108 00:05:04,680 --> 00:05:06,660 comment box component inside the comment box test 109 00:05:06,660 --> 00:05:10,170 file right here, we can wrap this comment box 110 00:05:10,170 --> 00:05:12,870 with that same root component. 111 00:05:12,870 --> 00:05:16,080 And so now the comment box can have a store 112 00:05:16,080 --> 00:05:18,980 inside that provider tag in its parent hierarchy 113 00:05:18,980 --> 00:05:22,240 which is gonna get that error test message to go away 114 00:05:22,240 --> 00:05:25,200 cuz now the comment box is going to think that it is really 115 00:05:25,200 --> 00:05:27,440 truly a part of a Redux application. 116 00:05:27,440 --> 00:05:30,930 And so it's going to go back to being in this type 117 00:05:30,930 --> 00:05:32,360 of situation right here. 118 00:05:32,360 --> 00:05:34,920 Now in truth, it's really going to be in our test 119 00:05:34,920 --> 00:05:39,000 file a little bit closer to this. 120 00:05:39,000 --> 00:05:40,860 So the test file, this is what's going on 121 00:05:40,860 --> 00:05:43,890 There is no app component inside the test file is just 122 00:05:43,890 --> 00:05:46,260 the comment box being wrapped by the provider 123 00:05:46,260 --> 00:05:48,000 with our Redux store. 124 00:05:48,000 --> 00:05:50,760 But the rest of our application, like the real application 125 00:05:50,760 --> 00:05:54,180 that runs in the browser is gonna be like this right here. 126 00:05:54,180 --> 00:05:56,640 So the provider that is placed inside the root tag 127 00:05:56,640 --> 00:05:58,980 will display the app component and the app component 128 00:05:58,980 --> 00:06:02,280 in turn shows the comment box and the comments list. 129 00:06:02,280 --> 00:06:03,870 All right, so that's the idea. 130 00:06:03,870 --> 00:06:05,290 Hopefully it makes sense now. 131 00:06:05,290 --> 00:06:07,560 It's now the last thing we have to do inside 132 00:06:07,560 --> 00:06:09,720 of our commentbox.test file. 133 00:06:09,720 --> 00:06:11,440 We will import that root tag 134 00:06:11,440 --> 00:06:13,563 and wrap our comment box with it. 135 00:06:14,660 --> 00:06:18,390 So inside the comment box I will import root 136 00:06:18,390 --> 00:06:23,390 from root and then I will wrap the comment box with root. 137 00:06:28,380 --> 00:06:32,070 So now the comment box is happy cuz it's got a provider tag 138 00:06:32,070 --> 00:06:34,430 or something that contains a provider tag 139 00:06:34,430 --> 00:06:37,200 and that provider tag as a store. 140 00:06:37,200 --> 00:06:38,400 So now it's the moment of truth 141 00:06:38,400 --> 00:06:41,640 I'm gonna save all these files and then I'll flip back over 142 00:06:41,640 --> 00:06:44,223 to my terminal and see how our tests are doing. 143 00:06:46,710 --> 00:06:49,260 So back over here, tests are going, tests are going 144 00:06:51,000 --> 00:06:53,670 we should probably see the app component finish up first 145 00:06:53,670 --> 00:06:56,520 and then we'll very quickly see the comment box succeed 146 00:06:56,520 --> 00:06:57,690 in running its test after that. 147 00:06:57,690 --> 00:06:59,530 Okay, so there's our app test file 148 00:06:59,530 --> 00:07:01,440 and then the comment box will kick in here. 149 00:07:01,440 --> 00:07:02,273 Just a second as well. 150 00:07:02,273 --> 00:07:07,273 Awesome. So we're now passing on both fronts and best of all 151 00:07:07,350 --> 00:07:11,370 we're passing with a very reusable solution right here. 152 00:07:11,370 --> 00:07:12,840 So now any component inside 153 00:07:12,840 --> 00:07:14,250 of our application that needs access 154 00:07:14,250 --> 00:07:16,650 to a Redux store can just make use 155 00:07:16,650 --> 00:07:18,600 of this root thing right here and it's 156 00:07:18,600 --> 00:07:22,040 off to the races, it's good to go, no issue whatsoever. 157 00:07:22,040 --> 00:07:23,880 Any component that is wrapped 158 00:07:23,880 --> 00:07:25,820 by the root tag is going to automatically think 159 00:07:25,820 --> 00:07:27,030 that it is part 160 00:07:27,030 --> 00:07:30,600 of a Redux application and it will run just fine. 161 00:07:30,600 --> 00:07:32,000 So this is definitely good progress. 162 00:07:32,000 --> 00:07:33,540 Let's take a break right here 163 00:07:33,540 --> 00:07:35,490 and we'll continue in the next section.