1 00:00:00,830 --> 00:00:05,720 The last video we did a little bit of trouble shooting around the current version of NPM. 2 00:00:05,730 --> 00:00:10,690 Now again you may or may not have that have had that little issue either way at this point in time. 3 00:00:10,710 --> 00:00:16,740 You should be able to go back to the server directory run the NPM rund dev command and then see both 4 00:00:16,740 --> 00:00:19,100 the backend server and the front end server. 5 00:00:19,110 --> 00:00:20,170 Both Papa. 6 00:00:20,340 --> 00:00:26,010 So at this point I am able to go back over to my browser at localhost 3000 and see the message. 7 00:00:26,040 --> 00:00:26,880 Hi there. 8 00:00:27,060 --> 00:00:29,930 And remember Hi there is being generated by our app component. 9 00:00:29,940 --> 00:00:31,180 At this point in time. 10 00:00:31,560 --> 00:00:37,170 So let's continue with our setup again at this point we have our indexed on J.S. file which is going 11 00:00:37,170 --> 00:00:42,750 to be housing a little bit of our redux setup and then we also have the js file which will eventually 12 00:00:42,750 --> 00:00:45,030 hold some of the re-act router stuff. 13 00:00:45,030 --> 00:00:49,970 Let's continue inside the index J.S. file at this point in time and continue on with some of this set 14 00:00:49,970 --> 00:00:52,820 up around the redux side of our application. 15 00:00:52,860 --> 00:00:56,850 Now in this video we're not only going to do some of the actual set up but we're also going to talk 16 00:00:56,850 --> 00:01:02,220 about some of the different libraries that we're using specifically the re-act redux library which is 17 00:01:02,220 --> 00:01:05,530 one that we installed in like two videos previous. 18 00:01:05,670 --> 00:01:10,140 We're going to do going to do a little bit of a discussion about how we wire up redux from scratch and 19 00:01:10,140 --> 00:01:11,840 then we will actually add it to this file. 20 00:01:11,940 --> 00:01:13,870 So let's get to it. 21 00:01:14,330 --> 00:01:18,400 All right I'm going to pull up a diagram and here we go. 22 00:01:18,570 --> 00:01:19,080 OK. 23 00:01:19,470 --> 00:01:27,120 So remember we have at this point installed re-act redux and re-act redux as a reminder the redux library 24 00:01:27,120 --> 00:01:31,700 is all about holding all the states where all the data inside of our application. 25 00:01:31,770 --> 00:01:37,260 And so it's fairly easy for us to kind of make a guess on some of the different pieces of state we'll 26 00:01:37,260 --> 00:01:39,460 have inside of our application. 27 00:01:39,510 --> 00:01:44,790 I kind of expect to eventually have probably two separate reducers inside of our application or two 28 00:01:44,790 --> 00:01:49,830 separate pieces of state one of which will be essentially in charge of just deciding whether or not 29 00:01:49,830 --> 00:01:51,140 the user is logged in. 30 00:01:51,300 --> 00:01:55,560 And then the other will be responsible for recording a list of all the surveys or fetching a list of 31 00:01:55,560 --> 00:01:58,980 all the surveys that the user has created over time. 32 00:01:58,980 --> 00:02:03,270 Now we might end up with another reducer or two inside of our application but we'll just see how it 33 00:02:03,270 --> 00:02:05,300 all pans out and then go from there. 34 00:02:05,380 --> 00:02:11,010 Right now I think that this is a pretty good place to start with and kind of to aim towards. 35 00:02:11,010 --> 00:02:16,890 So as a reminder of how redux works behind the scenes at the very top we've got our redux store which 36 00:02:16,890 --> 00:02:22,880 is where all of our state exists to determine our current state or to change our state. 37 00:02:22,890 --> 00:02:26,450 We call an action creator which dispatches an action. 38 00:02:26,610 --> 00:02:30,590 The action is sent to all the different reducers inside of our application. 39 00:02:30,720 --> 00:02:35,700 Those reducers are combined together with the combined reducers call and that is used to update the 40 00:02:35,700 --> 00:02:37,690 state in our redux store. 41 00:02:37,740 --> 00:02:41,250 Put another way we can look at this diagram right here. 42 00:02:41,250 --> 00:02:44,670 So again a little bit of reminder of what redux is doing for us. 43 00:02:44,670 --> 00:02:47,610 We have a re-act component from the Riak component. 44 00:02:47,610 --> 00:02:52,380 We will call an action creator that will return an action that will be sent to all of our different 45 00:02:52,380 --> 00:02:58,770 producers which will then update all the states inside of our redux store after that update all of that 46 00:02:58,770 --> 00:03:04,160 state that exists inside the store will be sent back down to react components which causes them to re 47 00:03:04,160 --> 00:03:08,230 render and display some amount of new content on the screen. 48 00:03:08,700 --> 00:03:15,830 So let's get to suddenly this thing up before we actually wire in or import any libraries into the index. 49 00:03:15,840 --> 00:03:21,570 J.S. file I want to talk a little bit about this very root level set up of redux because I've never 50 00:03:21,570 --> 00:03:26,400 really gone through it in any of my other courses in great detail and so I want to take just a little 51 00:03:26,400 --> 00:03:31,240 bit of time and expand upon the exact set up we're going to do inside this file. 52 00:03:31,260 --> 00:03:34,470 So at this point we've just reviewed and said yes we've got this story. 53 00:03:34,500 --> 00:03:39,840 It contains all of our state and some how it connects up to the Riak side of our application. 54 00:03:39,870 --> 00:03:42,370 So we can update the state that exists inside of it. 55 00:03:42,690 --> 00:03:48,210 But how does that actually connect to react per se like what set up are we really doing here. 56 00:03:48,720 --> 00:03:49,020 OK. 57 00:03:49,020 --> 00:03:54,390 So this is what really goes on behind the scenes inside of our indexed J.S. file. 58 00:03:54,420 --> 00:04:01,410 We are going to create our redux store and we are also going to render a provider tag the provider tag 59 00:04:01,410 --> 00:04:07,100 right here is a react component that is provided to us by the re-act redux library. 60 00:04:07,170 --> 00:04:13,230 And remember the reactor redux library is a library whose sole purpose is to make sure that react and 61 00:04:13,230 --> 00:04:19,290 redox work together nicely so that provider tag you can really think as being the sort of bonding layer 62 00:04:19,350 --> 00:04:24,750 or the kind of glue that exists between the react and redux sides of our application. 63 00:04:24,900 --> 00:04:31,620 So we will provide that provider tag we will pass it our redux store because the provider tag is at 64 00:04:31,620 --> 00:04:34,550 the very parent component of our application. 65 00:04:34,560 --> 00:04:40,650 Any other component that we create like say something called a survey list item can reach directly into 66 00:04:40,650 --> 00:04:45,710 the redux store and plus some amount of state soly things to that provider tag. 67 00:04:45,840 --> 00:04:50,760 So it is really this provider tag that we're going to place that serves as a sort of glue between the 68 00:04:50,760 --> 00:04:53,490 react and redux sides of our application. 69 00:04:53,490 --> 00:04:56,160 Now I might have one other diagram here. 70 00:04:56,160 --> 00:04:57,480 No I don't think I do. 71 00:04:57,510 --> 00:04:57,920 OK. 72 00:04:57,960 --> 00:04:58,910 So this is a good one. 73 00:04:59,100 --> 00:05:04,500 So just as another with your the entire purpose of that store at the very top of our application is 74 00:05:04,500 --> 00:05:11,100 to give us the ability to access data inside of our application from a very deeply nested component. 75 00:05:11,170 --> 00:05:15,300 And so we don't have any of these post list things over here and in these posts list components or anything 76 00:05:15,300 --> 00:05:15,850 like that. 77 00:05:16,020 --> 00:05:21,750 I just mean to remind you that if we have a very heavy component hierarchy or a lot of components inside 78 00:05:21,750 --> 00:05:27,630 of our application part of the idea behind redox is that some arbitrary component all the way down here 79 00:05:27,990 --> 00:05:33,570 can access the global data or global state inside of our application by reaching directly into that 80 00:05:33,570 --> 00:05:34,510 redux store. 81 00:05:34,790 --> 00:05:35,380 OK. 82 00:05:35,910 --> 00:05:38,530 So with that in mind just very quick review. 83 00:05:38,550 --> 00:05:43,980 Kind of high level stuff and what the purpose of that provider tag is let's now import the provider 84 00:05:43,980 --> 00:05:50,170 tag will import some helper's from redux and we'll get started with setting up the redux of the application. 85 00:05:50,190 --> 00:05:58,950 So at the top of our index G-S file I'm going to import the provider tag from reactor's docs import 86 00:05:59,040 --> 00:06:06,130 the create store and apply middleware helper's from rebox 87 00:06:09,020 --> 00:06:13,790 right underneath our import of the app component we will use the create store helper to create a new 88 00:06:13,850 --> 00:06:16,320 instance of our redux store. 89 00:06:16,340 --> 00:06:22,470 So right here around line 8 or so will say can store is create store. 90 00:06:22,730 --> 00:06:27,500 Now the first argument to create stort is all the different producers that we have inside of our application. 91 00:06:27,680 --> 00:06:29,730 And we haven't set up any reducers just yet. 92 00:06:29,840 --> 00:06:34,720 So I will give it a single dummy reducer a single dummy reducer. 93 00:06:34,790 --> 00:06:37,280 We're going to replace this very shortly. 94 00:06:37,280 --> 00:06:43,320 So my dummy reducer is going to be an arrow function that returns in a ring like so. 95 00:06:43,700 --> 00:06:48,260 So again we're going to come back and replace this argument right here or this is just a stand in to 96 00:06:48,260 --> 00:06:55,040 make sure that we can at least get redux started up as a second argument all provide the starting or 97 00:06:55,040 --> 00:06:57,390 initial state of my application. 98 00:06:57,410 --> 00:07:01,970 The second argument here is most relevant when you're taking care of server side rendering and stuff 99 00:07:01,970 --> 00:07:02,780 like that. 100 00:07:02,780 --> 00:07:06,470 So for us we don't really care about setting up some type of initial state. 101 00:07:06,470 --> 00:07:10,190 So we're going to just pass an empty object. 102 00:07:10,190 --> 00:07:14,210 Then finally we will add in the applied middleware call right here. 103 00:07:14,270 --> 00:07:18,320 We don't have any middleware that we're going to hook up right away but we will come back very shortly 104 00:07:18,380 --> 00:07:20,660 and add redux thunked in here. 105 00:07:20,780 --> 00:07:29,120 So I will add in Apply middleware like so I'll make sure that I invoke it by placing a set of parentheses. 106 00:07:29,140 --> 00:07:30,880 OK so that looks good to start. 107 00:07:30,920 --> 00:07:35,030 We're now going to expand upon this app component right here. 108 00:07:35,030 --> 00:07:38,890 Remember we just said that at the very top level of our application. 109 00:07:39,080 --> 00:07:48,890 So up here at the very top right above the component I want to show the provider tag or this provider 110 00:07:48,890 --> 00:07:52,570 component that is provided to us by the reactor redux library. 111 00:07:52,850 --> 00:07:58,850 So inside the index file We're going to place that provider tag and as an immediate child right inside 112 00:07:58,850 --> 00:08:01,240 of it will place the app component. 113 00:08:01,250 --> 00:08:03,690 Now all these words might seem kind of complex. 114 00:08:03,770 --> 00:08:06,910 In practice what we're going to do here is fairly straightforward. 115 00:08:06,950 --> 00:08:13,370 So first we're going to give myself a little bit of space to work with like so and then going to remove 116 00:08:13,370 --> 00:08:14,960 the first argument entirely. 117 00:08:14,990 --> 00:08:18,480 And we're going to put the app back in here by just one do it from scratch. 118 00:08:18,740 --> 00:08:26,100 So I'm going to say here's my provider tag I'm going to make sure I put a comma after it because this 119 00:08:26,100 --> 00:08:31,130 is the first document and the document selector is a second to that provider. 120 00:08:31,130 --> 00:08:40,570 I get it past the store that we just created as a prop so store is store like so and then as a child 121 00:08:40,660 --> 00:08:44,940 to the provider tag we'll pass the app component like so. 122 00:08:45,460 --> 00:08:45,770 OK. 123 00:08:45,790 --> 00:08:47,090 So this is looking pretty good. 124 00:08:47,350 --> 00:08:52,930 So we now are still showing the app component but we have also created a redux store at the very top 125 00:08:52,930 --> 00:08:58,210 level of our application and hooked it up to the re-act side of our application by placing the provider 126 00:08:58,210 --> 00:08:59,080 tag. 127 00:08:59,080 --> 00:09:01,370 Again remember the provider tag right here. 128 00:09:01,390 --> 00:09:08,010 It is a re-act component that knows how to read changes from our redux store any time the redux story 129 00:09:08,020 --> 00:09:11,230 gets some new states produced inside of it. 130 00:09:11,230 --> 00:09:14,410 The provider will inform all of its children components. 131 00:09:14,410 --> 00:09:19,740 So essentially everything that the app renders that some new state is available and it will update all 132 00:09:19,740 --> 00:09:23,490 of those different components with the new state. 133 00:09:23,530 --> 00:09:24,630 So this is looking pretty good. 134 00:09:24,670 --> 00:09:28,770 Let's flip on over to our browser and just make sure everything everything. 135 00:09:28,780 --> 00:09:32,580 Make sure everything is still appearing on the screen without any errors. 136 00:09:32,620 --> 00:09:38,100 So if I go back to localhost 3000 It looks like the automatic refresh has already kicked in. 137 00:09:38,110 --> 00:09:39,930 So I think were good to go here. 138 00:09:40,570 --> 00:09:43,300 Let's refresh once just to really make sure 139 00:09:46,290 --> 00:09:47,870 kids so here's my refresh 140 00:09:50,360 --> 00:09:52,920 and I still see high there appear on the screen. 141 00:09:53,000 --> 00:09:54,860 So this is a pretty good start. 142 00:09:54,860 --> 00:09:56,210 Let's continue on the next section. 143 00:09:56,240 --> 00:10:00,620 We're going to start to expand out on the different reducers inside of our application. 144 00:10:00,620 --> 00:10:05,460 Remember we just spoke about how we'll probably have like an author reducer and a servies reducer. 145 00:10:05,660 --> 00:10:10,580 So we'll review that stuff a little bit and we'll set up some different reducers and make sure we provide 146 00:10:10,580 --> 00:10:15,350 them as the first argument to create store rather than this kind of dummy reduce here. 147 00:10:15,530 --> 00:10:17,370 So I'll see you in the next section.