1 00:00:01,240 --> 00:00:02,780 Our form is working out pretty well. 2 00:00:02,800 --> 00:00:08,020 So now we need to really start to think about how we're going to actually assign a user up to our application. 3 00:00:08,020 --> 00:00:13,080 In other words how we're going to make an actual sign up request and then once a user is signed in. 4 00:00:13,090 --> 00:00:17,770 How are we going to actually share that signing information with all of our different screens. 5 00:00:17,860 --> 00:00:20,770 So here's a quick example of what we're going to do. 6 00:00:20,860 --> 00:00:25,650 So in this diagram I'm showing all the different components that we're going to have in just a moment. 7 00:00:25,720 --> 00:00:28,030 So we've got all of our different screens down here. 8 00:00:28,030 --> 00:00:32,740 All those different screens are being rendered or managed by some different navigation components coming 9 00:00:32,740 --> 00:00:34,540 from react navigation. 10 00:00:34,720 --> 00:00:37,930 So we're going to create a new component called off provider. 11 00:00:37,930 --> 00:00:42,820 This is going to use the context system just like we saw in the last application to share some information 12 00:00:42,820 --> 00:00:46,770 or data with all the different components inside of our app. 13 00:00:46,780 --> 00:00:51,580 So for example if the track create screen right here wants to know whether or not the user is currently 14 00:00:51,580 --> 00:00:57,460 signed in or maybe know what the user's ideas or anything like that we're going to allow the provider 15 00:00:57,610 --> 00:01:02,850 to use the content system to share that information with that screen right now. 16 00:01:02,890 --> 00:01:08,230 We need to kind of get a general idea of what state or information the auth provider is going to hold. 17 00:01:08,230 --> 00:01:12,760 So for right now I think that maybe we will just assume that the auth provider is going to have some 18 00:01:12,760 --> 00:01:17,740 property like is signed in to reflect whether or not the user is currently signed in. 19 00:01:17,860 --> 00:01:22,810 We can then use that flag to decide when our application first starts up whether or not we should show 20 00:01:22,840 --> 00:01:27,700 our users the sign up or sign in screens or all these other ones over here. 21 00:01:28,700 --> 00:01:32,040 So let's get started working on this auth provider. 22 00:01:32,300 --> 00:01:36,010 It's going to flip back over night editor inside of my source directory. 23 00:01:36,020 --> 00:01:42,640 I'm going to make a new folder called context then inside of here we're going to once again create that 24 00:01:42,640 --> 00:01:48,160 helper function to automate the process of creating a context and just setting up all those different 25 00:01:48,250 --> 00:01:49,930 actions and all that kind of good stuff. 26 00:01:50,620 --> 00:01:56,760 So on inside of context I can make a new file called create me do that once again create. 27 00:01:56,760 --> 00:01:57,480 There we go. 28 00:01:57,480 --> 00:02:02,040 Data context not J.S.. 29 00:02:02,050 --> 00:02:06,040 So once again inside of here we're going to export a function just to help us set up all this different 30 00:02:06,040 --> 00:02:11,670 context stuff automatically rather than having to rewrite the same code again and again and again. 31 00:02:11,920 --> 00:02:15,880 So everything we're gonna put inside of here we already wrote once before and we went over in great 32 00:02:15,880 --> 00:02:18,570 detail in the last application we worked on. 33 00:02:18,640 --> 00:02:21,070 So we're just gonna essentially rewrite the same code here. 34 00:02:21,130 --> 00:02:27,310 So we're going to import react and use reducer from react. 35 00:02:27,550 --> 00:02:37,020 Well then export default a function that's going to be called with a reducer function some actions object 36 00:02:37,950 --> 00:02:46,510 and a default value or essentially our default state then inside of here we'll create our context as 37 00:02:46,510 --> 00:02:54,640 react create context will then create our helper provider component so provider is going to be a react 38 00:02:54,640 --> 00:03:03,580 component that's going to take some children as props then inside of here we're gonna set up our use 39 00:03:03,580 --> 00:03:09,820 reducer call so we'll do const state and dispatch remember those are the two things anytime we call 40 00:03:09,820 --> 00:03:15,910 user reducer and when we call use reducer we have to pass in our reducer function that's the function 41 00:03:15,910 --> 00:03:21,750 with that switch statement and all those cases inside their and then the second value is going to be 42 00:03:21,960 --> 00:03:23,190 our default state. 43 00:03:23,190 --> 00:03:28,060 So that's gonna be a for us default value. 44 00:03:28,290 --> 00:03:32,850 Then after that we're going to loop over all of our different actions inside that actions object. 45 00:03:32,850 --> 00:03:39,240 Remember those are functions that we need to call each of those with our dispatch number dispatch is 46 00:03:39,270 --> 00:03:44,430 a function that we can call with some action object and whenever we do react is gonna take that action 47 00:03:44,460 --> 00:03:52,490 object and automatically send it off to the reducer for us so we're going to say bound actions and it 48 00:03:52,490 --> 00:03:54,610 will loop over all of the actions that were passed in. 49 00:03:54,620 --> 00:04:01,010 So let key in actions because actions is going to be an object so we're gonna use a for in loop to iterate 50 00:04:01,040 --> 00:04:08,370 over all those key value pairs and we'll say bound actions at key will be actions at key so look up 51 00:04:08,400 --> 00:04:17,000 each of these different action functions that are being passed in and call each one with our dispatch. 52 00:04:17,050 --> 00:04:22,420 Then after that we will return context dot provider. 53 00:04:22,410 --> 00:04:27,330 Remember this is the actual underline react component that makes all of our data available to all the 54 00:04:27,330 --> 00:04:29,920 different components rendered underneath it. 55 00:04:30,740 --> 00:04:33,830 We're going to pass in a value and remember this value prop. 8. 56 00:04:33,830 --> 00:04:38,350 Here is the actual information that gets shared with all of our child components. 57 00:04:38,400 --> 00:04:44,540 So instead of here we are putting our state just our entire state object in all these different bound 58 00:04:44,540 --> 00:04:45,740 actions that we've now created 59 00:04:48,530 --> 00:04:52,210 remember bound actions right here those are going to be the functions that we use to somehow change 60 00:04:52,210 --> 00:04:59,500 our state then inside that context provider will show whatever child component was passed in as a prop 61 00:05:00,880 --> 00:05:05,950 and then we'll close off context dot provider. 62 00:05:06,080 --> 00:05:09,560 And then finally at the very bottom outside of our provider function. 63 00:05:09,600 --> 00:05:15,540 So there's the closing curly brace for our provider function right outside of it we'll say return and 64 00:05:15,570 --> 00:05:21,900 object and we'll put inside of your context is context and provider is provider. 65 00:05:21,900 --> 00:05:24,820 And of course we can condense that down to just context. 66 00:05:25,770 --> 00:05:30,810 And provider it's now provider right here is our component that's going to essentially make all of our 67 00:05:30,810 --> 00:05:33,540 data available to everything else inside of application. 68 00:05:33,540 --> 00:05:38,280 And context is the context object that we're going to use to get access to that information from one 69 00:05:38,280 --> 00:05:41,030 of our child components. 70 00:05:41,050 --> 00:05:41,350 All right. 71 00:05:41,380 --> 00:05:46,300 Now that we've got this file put together we can now start to work on our actual context. 72 00:05:46,380 --> 00:05:55,280 So inside of context once again I'll create a new file called off context dot J.S. so then inside of 73 00:05:55,280 --> 00:06:00,140 here we're going to first require in the function we just created. 74 00:06:00,140 --> 00:06:02,180 So create data context 75 00:06:05,910 --> 00:06:08,000 will then create our reducer function. 76 00:06:08,050 --> 00:06:10,620 So I'm going to call this thing off reducer. 77 00:06:10,990 --> 00:06:14,410 Remember our reducer functions always get called with two arguments. 78 00:06:14,410 --> 00:06:16,960 The first argument is going to be our state. 79 00:06:16,960 --> 00:06:19,470 And the second will be the action. 80 00:06:19,510 --> 00:06:24,520 So this function right here is going to be called only by react directly whenever we call that dispatch 81 00:06:24,520 --> 00:06:25,810 function. 82 00:06:25,810 --> 00:06:31,120 So from this function right here we have to return some new state value usually inside of reducer like 83 00:06:31,120 --> 00:06:31,840 this. 84 00:06:31,840 --> 00:06:36,870 Remember we put in a switch statement and switch over action dot type. 85 00:06:36,880 --> 00:06:40,880 Now for right now we don't really know about the different types of actions we're going to have. 86 00:06:40,900 --> 00:06:46,540 So we will only put in a default case in which case we'll just return our current state and not do anything 87 00:06:46,540 --> 00:06:52,900 else then underneath that we're going to eventually define some of our different action functions. 88 00:06:52,900 --> 00:06:56,680 Remember these are functions that are intended to somehow modify our state. 89 00:06:56,770 --> 00:06:59,920 We also don't really know about what different functions we want to have yet. 90 00:07:00,190 --> 00:07:02,860 So I'll just not write out any just yet. 91 00:07:02,950 --> 00:07:06,120 And then finally at the very bottom we're going to take our reducer. 92 00:07:06,250 --> 00:07:11,470 We're gonna take create data context and export the provider in context to be used throughout the rest 93 00:07:11,470 --> 00:07:12,780 of our application. 94 00:07:13,060 --> 00:07:22,920 So we'll say export content provider and context are coming from create data context we'll pass in our 95 00:07:22,920 --> 00:07:24,220 three different arguments. 96 00:07:24,220 --> 00:07:28,630 So first one's going to be a reducer which is off reducer. 97 00:07:28,650 --> 00:07:31,770 The second is going to be our object with all of our different action functions. 98 00:07:31,770 --> 00:07:37,950 Again we don't have any right now so I'll just put an empty object and then finally our initial state. 99 00:07:37,950 --> 00:07:42,450 And like I just said in this diagram for right now we're going to just imagine that our initial state 100 00:07:42,450 --> 00:07:48,000 is some object that has a is signed in property and by default a user will probably not be signed in. 101 00:07:48,030 --> 00:07:54,910 So just by default have it be false it's all put in is signed in false. 102 00:07:54,910 --> 00:07:57,330 Like so now I'll tell you right now. 103 00:07:57,340 --> 00:08:00,570 Eventually we are not going to have the is signed in property. 104 00:08:00,610 --> 00:08:04,840 There's actually some other properties we can track inside the state object that make a lot more sense 105 00:08:05,050 --> 00:08:08,780 than just some simple flag like hey is the user signed in right now or not. 106 00:08:09,150 --> 00:08:13,930 But I want to kind of lead you under into understanding why would we would use some of these other properties. 107 00:08:14,050 --> 00:08:18,550 So again for right now we're just gonna assume that this is our only state property. 108 00:08:18,760 --> 00:08:18,990 OK. 109 00:08:19,020 --> 00:08:21,240 So there's our art context. 110 00:08:21,300 --> 00:08:25,920 Now finally let's wire this thing up inside of our app dot J.S. file. 111 00:08:25,920 --> 00:08:30,540 Remember we have to actually show that provider at the very top of our component hierarchy so that all 112 00:08:30,540 --> 00:08:34,290 the information inside there can be shared with all of our different screens. 113 00:08:34,350 --> 00:08:41,240 So I'll go back over to abduct J.S. inside of here after all of our different screens. 114 00:08:41,330 --> 00:08:47,890 I'm going to import provider and remember if we want to we can optionally rename this variable right 115 00:08:47,890 --> 00:08:52,780 here if we expect to have other contexts that we are importing into this file in this application. 116 00:08:52,780 --> 00:08:57,050 I really really expect that we're going to have some different context things that we're going to import. 117 00:08:57,070 --> 00:09:03,100 So going to rename this thing right away I'm going to call this first provider provider as off provider 118 00:09:04,140 --> 00:09:09,390 from source context off context 119 00:09:13,200 --> 00:09:18,780 and then finally from our app dot J.S. file if we go down to the very bottom rather than always exporting 120 00:09:18,840 --> 00:09:20,880 the results of create app container right here. 121 00:09:20,970 --> 00:09:28,350 We're going to instead a sign that to a variable that we'll call app like so and then instead we're 122 00:09:28,350 --> 00:09:35,040 going to do a export default of our own custom component in inside of here we're going to return our 123 00:09:35,160 --> 00:09:43,150 auth provider and inside there we're gonna show that app component. 124 00:09:43,250 --> 00:09:47,580 So now by setting this stuff up right here we really have the hierarchy that we just saw inside of our 125 00:09:47,580 --> 00:09:50,430 diagram at the very top is our auth provider. 126 00:09:50,430 --> 00:09:55,230 And then underneath it is all that navigation stuff in all of our other screens that are being navigated 127 00:09:55,260 --> 00:09:59,910 or Sammy shown in managed by that navigation stuff okay. 128 00:09:59,910 --> 00:10:02,880 So Alex good case let's save this. 129 00:10:02,920 --> 00:10:05,300 I'm going to flip back over just make sure I don't have any errors. 130 00:10:05,350 --> 00:10:06,430 Looks like I'm all good to go. 131 00:10:06,430 --> 00:10:08,280 So you have an error at this point. 132 00:10:08,320 --> 00:10:11,310 That means that you definitely have a typo somewhere inside of your code. 133 00:10:11,380 --> 00:10:16,360 Everything that we just added in is 100 percent independent of like any versioning issues around react 134 00:10:16,360 --> 00:10:17,870 native or anything like that. 135 00:10:17,890 --> 00:10:21,640 So if you're seeing an error right now definitely means that there's a typo somewhere inside of your 136 00:10:21,640 --> 00:10:22,010 code. 137 00:10:22,030 --> 00:10:25,700 So do a quick check and find where that thing is. 138 00:10:25,730 --> 00:10:26,990 Now we've got this first. 139 00:10:27,140 --> 00:10:30,920 First auth reducer setup and we've got some way to manage some states. 140 00:10:30,920 --> 00:10:31,870 Let's take a quick pause. 141 00:10:31,880 --> 00:10:37,070 When come back the next video we start to really think about the state values that are off providers 142 00:10:37,070 --> 00:10:37,850 going to have. 143 00:10:38,000 --> 00:10:42,200 How we're going to change them and how we're going to consume them inside of all of our different screens.