1 00:00:00,890 --> 00:00:04,980 In this video we're going to start installing redux and setting it up inside of our project so we can 2 00:00:04,980 --> 00:00:10,140 eventually get some action creators and to reduce or to reflect whether or not these are signed in once 3 00:00:10,140 --> 00:00:13,920 we reflect the authentications state of the user inside of a redux story. 4 00:00:13,920 --> 00:00:17,350 It's going to make building the rest of our application a lot easier. 5 00:00:17,670 --> 00:00:17,970 OK. 6 00:00:17,970 --> 00:00:20,980 So to get started we're going to flip on over to our terminal. 7 00:00:21,010 --> 00:00:25,230 We're going to stop my running server and we're going to install a couple of dependencies here still 8 00:00:25,250 --> 00:00:27,970 doing NPM install dash dash save. 9 00:00:28,260 --> 00:00:32,300 And we're going to get Rydex and re-act dash redux as well. 10 00:00:33,930 --> 00:00:34,230 OK. 11 00:00:34,250 --> 00:00:36,680 So I'm going to let those install while that goes. 12 00:00:36,680 --> 00:00:39,270 All flip back over to my code editor now. 13 00:00:39,320 --> 00:00:42,260 Right now I'm going to close the Google off file. 14 00:00:42,260 --> 00:00:44,380 I still have this file right here with my client ID. 15 00:00:44,380 --> 00:00:45,940 I'm going to close this down. 16 00:00:46,070 --> 00:00:50,960 I'm not going to save that file because we already copied the client id over to our component and then 17 00:00:50,960 --> 00:00:53,800 I'll close down my jazz file as well. 18 00:00:55,260 --> 00:00:59,850 All right so now I'm going to pull open my folder Explorer over here and we're going to create some 19 00:00:59,850 --> 00:01:04,680 of the files and folders that are typical of a re-act redux application. 20 00:01:04,680 --> 00:01:11,550 So I'm going to create a new folder inside my SIRC directory called actions inside there or make a action 21 00:01:11,550 --> 00:01:13,670 creator file called index. 22 00:01:13,770 --> 00:01:14,640 Yes. 23 00:01:14,640 --> 00:01:18,940 So this is going to eventually have all of our action creators inside of it. 24 00:01:18,950 --> 00:01:24,990 Next up I'm going to create a new folder inside the S R C directory called reducers. 25 00:01:25,280 --> 00:01:29,700 And as usual I'll make a new file inside they're called index not us. 26 00:01:30,200 --> 00:01:34,670 Inside the reducers index file I'm going to import combine reducers 27 00:01:37,310 --> 00:01:43,400 rhumb redux and then I will export default to combine reducers with an object. 28 00:01:43,420 --> 00:01:48,970 And as the last epic application or as in the last application we're going to put a dummy reducer inside 29 00:01:48,970 --> 00:01:51,350 of here just to get our redux application working. 30 00:01:51,580 --> 00:01:54,650 So I'll say something like replace me. 31 00:01:54,920 --> 00:01:59,680 And that's going to be a function that always returns a value of 5 or 10 or some string whatever you 32 00:01:59,680 --> 00:02:00,550 want it to be. 33 00:02:00,550 --> 00:02:02,610 Again this is just to get redux working. 34 00:02:02,680 --> 00:02:06,880 You don't have to do this at all if you try to start up your application without one reduce or you're 35 00:02:06,880 --> 00:02:11,780 going to very quickly see an error message that says hey I need a reducer. 36 00:02:11,790 --> 00:02:12,090 All right. 37 00:02:12,090 --> 00:02:12,910 That looks good. 38 00:02:12,910 --> 00:02:18,510 So I to close that reducers index such as file and the actions indexed Achebe's file. 39 00:02:18,510 --> 00:02:24,420 And then finally I'm going to find my SIRC directory and open up the root index file where we initially 40 00:02:24,420 --> 00:02:28,230 create our app component and render it onto the screen. 41 00:02:28,240 --> 00:02:28,680 All right. 42 00:02:28,680 --> 00:02:34,120 So inside of here will be that bad it's just going to be all the stuff we've usually done at the top. 43 00:02:34,120 --> 00:02:41,000 We're going to import the provider element from re-act redux. 44 00:02:41,020 --> 00:02:45,520 We're going to get reate store from redox 45 00:02:48,120 --> 00:02:49,470 next to our app import. 46 00:02:49,470 --> 00:02:55,080 I'm going to also get our producers. 47 00:02:55,270 --> 00:03:00,910 And then finally we will create our store right here on line 9 and then set up our provider inside the 48 00:03:00,910 --> 00:03:02,980 re-act Dom rende recall. 49 00:03:02,980 --> 00:03:10,320 So I'll say con story is going to be create store and I'll pass in my reducers and then I'll get myself 50 00:03:10,320 --> 00:03:12,710 a little bit of space here with the react on Dot render call 51 00:03:18,300 --> 00:03:23,300 and I'm going to wrap that app component with a provider that gets the store as a prop 52 00:03:27,300 --> 00:03:29,140 and don't forget to get the comma in here. 53 00:03:29,160 --> 00:03:30,630 That's a really easy thing to miss. 54 00:03:30,630 --> 00:03:35,410 Make sure you got a comma on the right hand side of the closing provider element OK. 55 00:03:35,410 --> 00:03:37,130 So I think this looks pretty good right here. 56 00:03:37,420 --> 00:03:42,740 So I'm going to save this and then I'll flip back over and we're just going to make sure that our application 57 00:03:42,740 --> 00:03:44,550 is still successfully it starts up. 58 00:03:44,720 --> 00:03:45,970 Oh I forgot. 59 00:03:45,980 --> 00:03:47,410 We stopped our development server. 60 00:03:47,410 --> 00:03:48,800 I'm gonna flip back over to my terminal. 61 00:03:48,800 --> 00:03:53,430 It looks like those packages for successfully installed Soldan NPM starts. 62 00:03:53,660 --> 00:03:58,470 And I'll just wait a second for the development server to startup. 63 00:03:58,490 --> 00:03:59,780 All right so there we go. 64 00:03:59,970 --> 00:04:02,030 And I see everything start up successfully. 65 00:04:02,040 --> 00:04:03,360 All right this looks fantastic. 66 00:04:03,360 --> 00:04:04,870 Let's take a quick pause right here. 67 00:04:04,920 --> 00:04:08,670 When we come back in the next section we're going to start working on some action creators and some 68 00:04:08,730 --> 00:04:10,880 authentication reducer as well. 69 00:04:10,920 --> 00:04:12,930 So quick pause and I'll see you in just a minute.