1 00:00:00,960 --> 00:00:01,793 Instructor: In the last section, 2 00:00:01,793 --> 00:00:04,320 we wired up the signup form to our application. 3 00:00:04,320 --> 00:00:06,689 Before we can add any inputs to this thing, 4 00:00:06,689 --> 00:00:09,180 we need to make sure that we have Redux wired up 5 00:00:09,180 --> 00:00:11,730 to our application so that we can hook up Redux form 6 00:00:11,730 --> 00:00:14,790 to automatically handle the form elements. 7 00:00:14,790 --> 00:00:16,312 So in this section, 8 00:00:16,312 --> 00:00:18,510 we're gonna set up Redux inside of our app. 9 00:00:18,510 --> 00:00:21,240 To get started, I'll flip back over to my code editor, 10 00:00:21,240 --> 00:00:22,890 and we're going to create a new directory 11 00:00:22,890 --> 00:00:24,660 to house all the different reducers 12 00:00:24,660 --> 00:00:26,730 that we're going to eventually make. 13 00:00:26,730 --> 00:00:28,800 So inside of my src directory, 14 00:00:28,800 --> 00:00:31,173 I'll make a new folder called reducers. 15 00:00:32,340 --> 00:00:33,600 And then inside there, 16 00:00:33,600 --> 00:00:37,470 I'm gonna make a new file of index.js. 17 00:00:37,470 --> 00:00:39,840 And this is going to house eventually 18 00:00:39,840 --> 00:00:42,150 our combined reducers call. 19 00:00:42,150 --> 00:00:43,800 Let's at least set that up right now. 20 00:00:43,800 --> 00:00:45,060 And then we'll have a quick discussion 21 00:00:45,060 --> 00:00:48,420 about the different reducers that we're going to need. 22 00:00:48,420 --> 00:00:53,420 So at the top I will import combineReducers from redux, 23 00:00:55,140 --> 00:00:59,350 and then I will do an export default combineReducers 24 00:01:01,080 --> 00:01:02,403 and pass an object in. 25 00:01:03,240 --> 00:01:05,430 Okay, so let's now talk about the different reducers 26 00:01:05,430 --> 00:01:08,380 that we're probably going to need to hook up to this thing. 27 00:01:09,630 --> 00:01:12,560 So in total, I think that our reducer situation 28 00:01:12,560 --> 00:01:16,260 is gonna be really, really straightforward. 29 00:01:16,260 --> 00:01:19,020 Out of everything we've shown inside the app so far, 30 00:01:19,020 --> 00:01:22,980 I think that we only need one general reducer, 31 00:01:22,980 --> 00:01:24,870 and that reducer will probably have 32 00:01:24,870 --> 00:01:27,420 two properties associated with it. 33 00:01:27,420 --> 00:01:30,600 The first one is gonna be a property of authenticated, 34 00:01:30,600 --> 00:01:32,100 and its type will be a string. 35 00:01:33,240 --> 00:01:35,730 Now the property name right here of authenticated 36 00:01:35,730 --> 00:01:36,810 might make it really seem 37 00:01:36,810 --> 00:01:38,910 like this should be a boolean, true or false. 38 00:01:38,910 --> 00:01:40,890 Like, are they authenticated? 39 00:01:40,890 --> 00:01:42,720 Yes, no, true, or false. 40 00:01:42,720 --> 00:01:45,420 But we're going to use a little bit of a trickier. 41 00:01:45,420 --> 00:01:47,700 Remember, all of our authentication is tied 42 00:01:47,700 --> 00:01:51,090 to the presence of that JSON web token. 43 00:01:51,090 --> 00:01:53,520 So for the authenticated property right here, 44 00:01:53,520 --> 00:01:56,460 we are going to assign our JSON web token 45 00:01:56,460 --> 00:01:59,100 to this authenticated thing. 46 00:01:59,100 --> 00:02:02,760 If a JSON web token has been assigned to authenticate, 47 00:02:02,760 --> 00:02:06,000 then we're going to assume that the user is signed in. 48 00:02:06,000 --> 00:02:08,940 But if there is no authenticated token assigned here, 49 00:02:08,940 --> 00:02:10,020 if it's an empty string 50 00:02:10,020 --> 00:02:11,970 and there's no token there whatsoever, 51 00:02:11,970 --> 00:02:15,180 we're going to assume that the user is not signed in. 52 00:02:15,180 --> 00:02:17,190 So calling this property authenticated 53 00:02:17,190 --> 00:02:18,510 kind of does make sense. 54 00:02:18,510 --> 00:02:20,167 The presence of a string says, 55 00:02:20,167 --> 00:02:23,610 "Yes, you are signed in 'cause here's the token." 56 00:02:23,610 --> 00:02:26,880 And if the string is empty, which is interpreted 57 00:02:26,880 --> 00:02:29,160 in JavaScript as being a falsy value, 58 00:02:29,160 --> 00:02:32,880 and that's going to indicate that no, you are not signed in. 59 00:02:32,880 --> 00:02:34,680 Now the other property that we're gonna have in here 60 00:02:34,680 --> 00:02:36,153 is the error property. 61 00:02:37,200 --> 00:02:40,200 So on our backend server we have put together error handling 62 00:02:40,200 --> 00:02:42,530 for when the user has tried to sign up 63 00:02:42,530 --> 00:02:45,420 with a email already in use or sign in 64 00:02:45,420 --> 00:02:48,870 with an email and password combination that is invalid. 65 00:02:48,870 --> 00:02:50,970 And so we're going to eventually want to communicate 66 00:02:50,970 --> 00:02:54,420 failed sign in and sign up attempts to the user. 67 00:02:54,420 --> 00:02:56,550 That error message that we're gonna show to them 68 00:02:56,550 --> 00:02:59,640 will be carried by this error property. 69 00:02:59,640 --> 00:03:02,940 So in total, I think we really just need this auth reducer, 70 00:03:02,940 --> 00:03:04,380 and it's gonna have these two properties 71 00:03:04,380 --> 00:03:06,090 which are gonna handle just about everything 72 00:03:06,090 --> 00:03:08,133 about authentication inside of our app. 73 00:03:09,600 --> 00:03:11,790 So let's make this reducer. 74 00:03:11,790 --> 00:03:12,810 I'm gonna get started 75 00:03:12,810 --> 00:03:16,920 by creating a new file inside my reducers directory. 76 00:03:16,920 --> 00:03:18,870 And I'm gonna call it simply auth. 77 00:03:18,870 --> 00:03:20,703 This is our auth reducer. 78 00:03:23,850 --> 00:03:25,530 And inside of here, we can put together 79 00:03:25,530 --> 00:03:29,130 some of our typical boiler plate for a reducer. 80 00:03:29,130 --> 00:03:33,360 I'll do an export default function 81 00:03:33,360 --> 00:03:36,783 with some initial state and our action. 82 00:03:37,830 --> 00:03:40,140 The initial state or the default value 83 00:03:40,140 --> 00:03:41,940 for state that we assign to this thing 84 00:03:41,940 --> 00:03:44,160 will be an empty object. 85 00:03:44,160 --> 00:03:47,040 So an empty object indicating, by default, 86 00:03:47,040 --> 00:03:48,780 the user is not authenticated 87 00:03:48,780 --> 00:03:50,872 because authenticated will be undefined 88 00:03:50,872 --> 00:03:54,420 and there should be, by default, no error message. 89 00:03:54,420 --> 00:03:56,280 Now, one way that we can really make it clear 90 00:03:56,280 --> 00:03:58,740 to other engineers about what properties 91 00:03:58,740 --> 00:04:01,050 they should expect to be inside of our project, 92 00:04:01,050 --> 00:04:03,720 we might instead of doing an empty object right here, 93 00:04:03,720 --> 00:04:06,900 we could always define a initial state object 94 00:04:06,900 --> 00:04:09,060 above this function declaration. 95 00:04:09,060 --> 00:04:11,783 Let's try that out just to see what it might look like. 96 00:04:12,690 --> 00:04:15,030 So this would be a slightly different approach 97 00:04:15,030 --> 00:04:17,010 that would definitely help out other engineers 98 00:04:17,010 --> 00:04:18,540 who are looking at the code inside this 99 00:04:18,540 --> 00:04:21,810 without any real idea of what's going on. 100 00:04:21,810 --> 00:04:24,930 So we could do an INITIAL_STATE object, 101 00:04:24,930 --> 00:04:26,280 which is in all capitals 102 00:04:26,280 --> 00:04:28,740 'cause it's intended to be a constant variable 103 00:04:28,740 --> 00:04:31,653 or truly constant and really truly unchanging. 104 00:04:33,660 --> 00:04:36,746 And then we can give it authenticated 105 00:04:36,746 --> 00:04:39,273 and by default, that will be an empty string. 106 00:04:40,500 --> 00:04:42,690 And then the error message, 107 00:04:42,690 --> 00:04:45,210 and we're gonna call this errorMessage rather 108 00:04:45,210 --> 00:04:46,170 than just error 109 00:04:46,170 --> 00:04:50,850 because the word simply error is sometimes interpreted 110 00:04:50,850 --> 00:04:53,400 as being a keyword in JavaScript. 111 00:04:53,400 --> 00:04:55,230 So we're just gonna be really clear here 112 00:04:55,230 --> 00:04:57,180 and say this is an errorMessage 113 00:04:57,180 --> 00:04:59,250 that we're trying to communicate to our user. 114 00:04:59,250 --> 00:05:01,850 And this will be an empty string as well by default. 115 00:05:02,940 --> 00:05:04,650 So now rather than assigning 116 00:05:04,650 --> 00:05:06,930 an empty object to our state by default, 117 00:05:06,930 --> 00:05:09,120 we can assign INITIAL_STATE. 118 00:05:11,980 --> 00:05:14,130 Okay, so we don't have any action creators, 119 00:05:14,130 --> 00:05:16,200 we have no types or anything like that right now. 120 00:05:16,200 --> 00:05:19,392 So by default, we'll just have this reducer 121 00:05:19,392 --> 00:05:22,923 return the state object and do nothing else. 122 00:05:24,480 --> 00:05:25,500 So that looks pretty good. 123 00:05:25,500 --> 00:05:29,100 We'll flip back over to our combinedReducers file now, 124 00:05:29,100 --> 00:05:31,760 we'll import the auth reducer, from auth, 125 00:05:36,330 --> 00:05:39,183 and we can wire it up to the combineReducer call. 126 00:05:40,020 --> 00:05:42,330 Now, we could do like auth auth, like so, 127 00:05:42,330 --> 00:05:45,030 but we'll instead make use of ES2015 syntax 128 00:05:45,030 --> 00:05:46,860 and leave it simply as auth. 129 00:05:48,660 --> 00:05:50,760 Okay, I think that's it for combineReducers. 130 00:05:50,760 --> 00:05:51,690 Now, the very last thing 131 00:05:51,690 --> 00:05:53,610 that we'll take care of inside this section, just to get 132 00:05:53,610 --> 00:05:56,880 through this very common Redux set up very quickly, 133 00:05:56,880 --> 00:06:00,360 we will open up our root index.js file, 134 00:06:00,360 --> 00:06:05,130 and let's import our createStore helper from Redux. 135 00:06:05,130 --> 00:06:07,500 We'll get our provider tag from react-redux, 136 00:06:07,500 --> 00:06:09,963 and wire it up to our entire application. 137 00:06:11,370 --> 00:06:15,180 So at the top by all of our library imports, 138 00:06:15,180 --> 00:06:20,130 we'll grab the Provider tag from react-redux 139 00:06:20,130 --> 00:06:24,633 and we can get createStore from redux. 140 00:06:28,860 --> 00:06:32,490 Then we'll place our Provider tag to wrap the BrowserRouter. 141 00:06:36,466 --> 00:06:41,010 And we'll make sure I get the closing tag on here as well. 142 00:06:41,010 --> 00:06:44,190 And to the Provider, we can pass our store prop. 143 00:06:44,190 --> 00:06:45,963 So we'll call createStore. 144 00:06:47,100 --> 00:06:49,440 We'll pass in our reducers 145 00:06:49,440 --> 00:06:53,040 and a default state object of empty object. 146 00:06:53,040 --> 00:06:55,140 And then one quick thing that we can't forget to do 147 00:06:55,140 --> 00:06:57,600 is to import the reducers. 148 00:06:57,600 --> 00:07:00,720 So by all of our code imports, 149 00:07:00,720 --> 00:07:03,540 not the library ones, but by our imports, 150 00:07:03,540 --> 00:07:05,250 so we'll put it right here at the top, 151 00:07:05,250 --> 00:07:07,710 we'll import our reducers 152 00:07:07,710 --> 00:07:10,533 from the reducers directory, like so. 153 00:07:11,790 --> 00:07:13,260 Okay, I think that's it. 154 00:07:13,260 --> 00:07:17,370 I think that is a lot of Redux code inside of one section. 155 00:07:17,370 --> 00:07:19,350 Let's very quickly flip back over the browser 156 00:07:19,350 --> 00:07:21,700 and make sure that everything is still working. 157 00:07:24,300 --> 00:07:26,223 So back over here, we get the refresh. 158 00:07:29,010 --> 00:07:31,080 And it looks like we're still good to go. 159 00:07:31,080 --> 00:07:33,480 So we can still navigate around to these two pages. 160 00:07:33,480 --> 00:07:35,340 Redux is running behind the scenes. 161 00:07:35,340 --> 00:07:37,440 It's not really doing anything just yet, 162 00:07:37,440 --> 00:07:40,110 but we certainly can now add in Redux form 163 00:07:40,110 --> 00:07:42,450 and continue working on the signup form. 164 00:07:42,450 --> 00:07:44,950 So quick break, and I'll see you in just a minute.