1 00:00:00,960 --> 00:00:02,850 -: In the last section, we did some setup 2 00:00:02,850 --> 00:00:06,480 of our Redux application inside the reducers folder. 3 00:00:06,480 --> 00:00:10,260 We're now gonna move over to our SRC index.js file 4 00:00:10,260 --> 00:00:14,010 and wire up those reducers to a new reduce store. 5 00:00:14,010 --> 00:00:15,854 So inside of index.js, I'll first get started 6 00:00:15,854 --> 00:00:20,550 by importing a little helper from the React Redux Library 7 00:00:20,550 --> 00:00:23,160 which we installed a couple of sections ago. 8 00:00:23,160 --> 00:00:26,730 So at the top I'm going to import the provider tag 9 00:00:26,730 --> 00:00:28,743 from react-redux. 10 00:00:29,880 --> 00:00:30,810 Then underneath that 11 00:00:30,810 --> 00:00:35,810 I will import the createStore function from Redux. 12 00:00:37,260 --> 00:00:40,590 And then finally, I will import the combined reducers call 13 00:00:40,590 --> 00:00:44,880 that we just added inside the reducers index.js file. 14 00:00:44,880 --> 00:00:49,880 So we'll import reducers from reducers. 15 00:00:50,370 --> 00:00:51,780 Now this import statement right here 16 00:00:51,780 --> 00:00:52,920 is a little bit misleading. 17 00:00:52,920 --> 00:00:53,790 Remember that we set 18 00:00:53,790 --> 00:00:57,330 up absolute file imports inside of our project. 19 00:00:57,330 --> 00:01:00,120 So by writing simply reducers right here 20 00:01:00,120 --> 00:01:03,660 that's going to try to import the reducers directory. 21 00:01:03,660 --> 00:01:06,030 When we import a directory by default 22 00:01:06,030 --> 00:01:09,840 we get the index.js file from within that directory. 23 00:01:09,840 --> 00:01:13,230 So reducers right here is essentially whatever we exported 24 00:01:13,230 --> 00:01:15,093 from the index.js file. 25 00:01:16,350 --> 00:01:18,240 Now, quick thing to note here, remember 26 00:01:18,240 --> 00:01:19,830 that on Redux we have a lot 27 00:01:19,830 --> 00:01:21,870 of things that get exported from this library. 28 00:01:21,870 --> 00:01:23,670 Same thing with reactory ducts. 29 00:01:23,670 --> 00:01:26,760 So in both those cases, we want to use the curly braces 30 00:01:26,760 --> 00:01:28,922 so that we get just the provider tag right here 31 00:01:28,922 --> 00:01:31,200 and just the create store tag 32 00:01:31,200 --> 00:01:32,943 or excuse me, function right here. 33 00:01:34,500 --> 00:01:35,730 Now, just in case you've never set 34 00:01:35,730 --> 00:01:37,830 up a Redux application from scratch 35 00:01:37,830 --> 00:01:39,150 I wanna give you a quick heads 36 00:01:39,150 --> 00:01:41,733 up as to what's going on with the provider tag. 37 00:01:42,630 --> 00:01:44,700 All right, so quick diagram here. 38 00:01:44,700 --> 00:01:47,460 So this is a diagram of how our application is going to look 39 00:01:47,460 --> 00:01:50,340 after we wire up redux to it. 40 00:01:50,340 --> 00:01:52,380 Here's the app component, and then down here 41 00:01:52,380 --> 00:01:55,743 we've got the comment box and the comments list components. 42 00:01:56,970 --> 00:01:59,460 When we put together the comment box and comment list 43 00:01:59,460 --> 00:02:02,040 we're going to eventually make sure that they are wired 44 00:02:02,040 --> 00:02:05,044 up to our Redux application, and we do so by making use 45 00:02:05,044 --> 00:02:09,660 of that connect function from the react redux library. 46 00:02:09,660 --> 00:02:12,690 The connect function right here talks to our Redux store 47 00:02:12,690 --> 00:02:15,870 or our instance of Redux that contains all of our reducers 48 00:02:15,870 --> 00:02:19,860 and state through the use of that provider tag. 49 00:02:19,860 --> 00:02:22,020 So the provider tag that we just imported 50 00:02:22,020 --> 00:02:26,100 into the index.js file is a React component 51 00:02:26,100 --> 00:02:29,340 that communicates directly with every connect function 52 00:02:29,340 --> 00:02:32,520 that we create inside of our application. 53 00:02:32,520 --> 00:02:33,690 The provider tag 54 00:02:33,690 --> 00:02:36,300 and the connect tag or connect function work together 55 00:02:36,300 --> 00:02:39,870 to give our components direct access to the Redux store. 56 00:02:39,870 --> 00:02:42,570 So you can kind of imagine this connect function right here 57 00:02:42,570 --> 00:02:45,240 reaching back up to the provider tag 58 00:02:45,240 --> 00:02:47,610 and getting access to some piece of state, or 59 00:02:47,610 --> 00:02:50,790 giving that component the ability to call an action creator 60 00:02:50,790 --> 00:02:52,353 and dispatch a new action. 61 00:02:53,370 --> 00:02:55,380 So with that in mind, we're gonna flip back over 62 00:02:55,380 --> 00:02:57,180 to our index.js file 63 00:02:57,180 --> 00:03:00,060 and start doing some setup inside of here. 64 00:03:00,060 --> 00:03:01,110 I'm gonna first get started 65 00:03:01,110 --> 00:03:03,420 by giving myself a little bit more space to work 66 00:03:03,420 --> 00:03:05,823 with inside of the ReactDom.render call. 67 00:03:08,280 --> 00:03:10,290 And then around the app component 68 00:03:10,290 --> 00:03:12,603 I'll place a provider tag. 69 00:03:15,420 --> 00:03:19,200 The provider tag takes a single prop called store 70 00:03:19,200 --> 00:03:22,170 and it's going to be an instance of a Redux store 71 00:03:22,170 --> 00:03:24,450 a or a Redux application. 72 00:03:24,450 --> 00:03:26,250 So to create a new Redux store 73 00:03:26,250 --> 00:03:28,500 we're going to use this create store function right here 74 00:03:28,500 --> 00:03:30,540 that we just imported. 75 00:03:30,540 --> 00:03:34,500 So I'll call Create Store, and into this function 76 00:03:34,500 --> 00:03:35,940 the first argument that we're gonna pass 77 00:03:35,940 --> 00:03:38,313 in will be our list of reducers. 78 00:03:40,260 --> 00:03:43,050 And then the second argument will be our initial state 79 00:03:43,050 --> 00:03:44,490 for the Redux store. 80 00:03:44,490 --> 00:03:45,840 We don't have the initial states 81 00:03:45,840 --> 00:03:48,660 or any initial values to seed our Redux store with 82 00:03:48,660 --> 00:03:51,783 so we're just gonna pass in an empty object like so. 83 00:03:53,970 --> 00:03:55,140 Okay. So that's pretty much it. 84 00:03:55,140 --> 00:03:57,270 That's all we have to do inside of here. 85 00:03:57,270 --> 00:03:59,220 We made use of the provider tag 86 00:03:59,220 --> 00:04:02,100 we called Create Store to pass the provider a store 87 00:04:02,100 --> 00:04:03,630 and we passed our reducers 88 00:04:03,630 --> 00:04:06,120 into the Redux store that we created. 89 00:04:06,120 --> 00:04:08,310 So really quickly, we're gonna flip back over 90 00:04:08,310 --> 00:04:10,410 to our terminal first 91 00:04:10,410 --> 00:04:12,393 and see if our tests are still passing. 92 00:04:18,600 --> 00:04:20,760 Now, note that our tests right now are really 93 00:04:20,760 --> 00:04:22,890 testing our components in isolation. 94 00:04:22,890 --> 00:04:24,630 So in theory, by adding in Redux 95 00:04:24,630 --> 00:04:27,090 it shouldn't really be modifying anything having to do 96 00:04:27,090 --> 00:04:28,680 with our tests. 97 00:04:28,680 --> 00:04:30,330 Now you'll notice it's taking my test suite here. 98 00:04:30,330 --> 00:04:31,500 Just a little bit of time to boot 99 00:04:31,500 --> 00:04:32,550 up. Okay, thank goodness. 100 00:04:32,550 --> 00:04:33,750 There we go. 101 00:04:33,750 --> 00:04:36,150 And then we'll also flip over to our browser really quickly 102 00:04:36,150 --> 00:04:37,560 and make sure the app is still working 103 00:04:37,560 --> 00:04:39,000 inside the browser as well. 104 00:04:39,000 --> 00:04:40,450 So I can refresh the page 105 00:04:41,850 --> 00:04:43,830 and I should see the application still appear 106 00:04:43,830 --> 00:04:45,630 on the screen without any errors. 107 00:04:45,630 --> 00:04:46,740 Very good. 108 00:04:46,740 --> 00:04:47,760 All right, so let's continue. 109 00:04:47,760 --> 00:04:48,593 In the next section 110 00:04:48,593 --> 00:04:50,910 we're gonna start creating our Action creator to 111 00:04:50,910 --> 00:04:54,570 add comments and then wire that up to one of our components 112 00:04:54,570 --> 00:04:57,270 or more specifically the comment box component. 113 00:04:57,270 --> 00:04:59,720 So quick break and I'll see you in just a minute.