1 00:00:00,870 --> 00:00:05,730 Now that we understand the entire and grok and Jason server side of things we can't turn our focus back 2 00:00:05,760 --> 00:00:07,580 over to our application zone. 3 00:00:07,580 --> 00:00:12,640 So you two quick diagrams to help you understand the flow of information inside of our app. 4 00:00:12,670 --> 00:00:13,180 All right. 5 00:00:13,180 --> 00:00:17,440 So this is what's currently happening inside of application right now in our application. 6 00:00:17,440 --> 00:00:22,810 First loads up and we try to show say the index screen that index screen is going to be displayed by 7 00:00:22,870 --> 00:00:25,170 react navigation index screen. 8 00:00:25,180 --> 00:00:27,670 Then looks back up its component hierarchy. 9 00:00:27,760 --> 00:00:33,040 It finds that blog post provider and it pulls out the list of blog posts from it. 10 00:00:33,220 --> 00:00:35,340 The index screen then renders that list of blog posts. 11 00:00:35,380 --> 00:00:36,310 And that's pretty much it. 12 00:00:36,310 --> 00:00:41,470 Everything is good to go so this flow right here is going to change significantly as we start to add 13 00:00:41,470 --> 00:00:46,750 in some network requests to actually fetch our list a blog post instead. 14 00:00:46,750 --> 00:00:50,710 So let's take a look at a similar diagram that's slightly adjusted to account for the fact that we're 15 00:00:50,710 --> 00:00:53,190 gonna reach out to that API. 16 00:00:53,220 --> 00:00:53,520 All right. 17 00:00:53,520 --> 00:00:57,070 So here's what's going to really go on from here moving on forward. 18 00:00:57,480 --> 00:01:02,280 Our index screen and all of our other screens for that matter are still going to be displayed by react 19 00:01:02,280 --> 00:01:08,550 navigation now inside of our index screen we're going to call a function that's going to make a request 20 00:01:08,580 --> 00:01:12,780 to our Jason server and get our current list of blog posts from it. 21 00:01:13,550 --> 00:01:17,660 Remember anytime we make a network request that takes some amount of time. 22 00:01:17,910 --> 00:01:22,610 That's only on the realm of like milliseconds but it does take some amount of time. 23 00:01:22,610 --> 00:01:27,860 So while the index screen and essentially our entire application is work waiting on a response to that 24 00:01:27,860 --> 00:01:32,720 never agree to request the rest of the app is still going to go ahead and tried to charge on forward 25 00:01:32,990 --> 00:01:35,910 and render whatever information is available. 26 00:01:35,930 --> 00:01:40,930 So when our application first starts up we're going to have a empty list of blog posts because we've 27 00:01:40,940 --> 00:01:47,790 not yet gotten a response from that Jason server so then at some future point time we're going to eventually 28 00:01:47,790 --> 00:01:49,550 get a response. 29 00:01:49,560 --> 00:01:54,630 So then at that point time we're gonna take the list of blog posts we just got back from the API and 30 00:01:54,630 --> 00:02:00,630 we're going to somehow store them through our use reduce our hook remember use reducer is very similar 31 00:02:00,630 --> 00:02:06,000 to you state it essentially has a piece of state that we want to change and modify inside of our app 32 00:02:06,430 --> 00:02:13,550 in a general state refers to data so as soon as we store that list of blog posts our state has now changed 33 00:02:14,060 --> 00:02:15,050 because our state change. 34 00:02:15,050 --> 00:02:20,930 We're then going to re-enter the whole application index screen is then going to look back at that context 35 00:02:20,930 --> 00:02:25,430 object it's going to see that the new list of blog posts is available the list we got back from the 36 00:02:25,430 --> 00:02:31,060 API and so it's gonna take that list to blog posts and display them on the screen to the user. 37 00:02:31,070 --> 00:02:32,030 That's the entire flow. 38 00:02:32,030 --> 00:02:35,530 That's where we're going to now change our application to do. 39 00:02:35,690 --> 00:02:38,390 All right so let's start making these changes right away. 40 00:02:38,480 --> 00:02:42,290 The first thing we probably need to do is make sure that we have a function that we can call to make 41 00:02:42,290 --> 00:02:43,920 a request to the Jason server. 42 00:02:43,970 --> 00:02:47,860 So we'll focus on that first back inside my code. 43 00:02:47,900 --> 00:02:52,260 Ed first begin by funding my S.R. see directory is inside there. 44 00:02:52,270 --> 00:02:59,780 I'll make a new folder called API and then inside of API I'll make a new file called Jason server J.S. 45 00:03:00,710 --> 00:03:01,420 inside of here. 46 00:03:01,430 --> 00:03:06,460 We're going to import axioms and make a pre configured version of axioms. 47 00:03:06,470 --> 00:03:12,510 So I'm going to import axis and then we'll do export default. 48 00:03:12,510 --> 00:03:19,880 Axis dot create so inside of here there's really only one option that we want to configure on this axis 49 00:03:19,910 --> 00:03:20,390 instance. 50 00:03:20,390 --> 00:03:28,470 And that is the base you are El remember your l has capital you are L so inside of here we put the base 51 00:03:28,500 --> 00:03:30,470 you l to our server. 52 00:03:30,600 --> 00:03:35,590 Now this is where things start to get really hairy remember with and grok our base you all is gonna 53 00:03:35,610 --> 00:03:40,040 change once every eight hours unless you start paying for an account. 54 00:03:40,050 --> 00:03:47,220 So for me right now I can go back over to my end Greek window and for the next seven hours and 54 minutes. 55 00:03:47,220 --> 00:03:53,640 This right here is my base you are L so I'm going to copy that and I'll throw it in as the base you 56 00:03:53,640 --> 00:03:59,660 are L again you're going to have to come back to this thing in eight hours and you have to update that 57 00:03:59,660 --> 00:04:03,890 base you are L if you don't update that your application is not going to work. 58 00:04:03,950 --> 00:04:09,230 I know this is a pain but unfortunately this kind of is the reality unless you want to pay for an account. 59 00:04:09,410 --> 00:04:14,480 There are some other services out there very similar to and grok that don't have a time limitation. 60 00:04:14,480 --> 00:04:17,760 And so you can make use of them but they're a little bit less reliable. 61 00:04:17,780 --> 00:04:22,170 I've tried using them in other courses and I found that a lot of people had some difficulty with them. 62 00:04:22,250 --> 00:04:28,180 So even though Ingram has this very clear downside well it's still kind of the best of the bunch OK. 63 00:04:28,210 --> 00:04:33,350 So we've now got an axial instance that is pre configured to talk to that you are L right there. 64 00:04:33,350 --> 00:04:39,820 So then save that file and then I'll find my blog context dot J.S. file. 65 00:04:39,820 --> 00:04:44,190 I went to import that Acciona instance that we just created at the top. 66 00:04:44,280 --> 00:04:51,980 So import Jason server from up one directory API Jason server. 67 00:04:52,170 --> 00:04:58,470 Now we can make use of this Acciona instance to make some requests inside of these action functions. 68 00:04:58,470 --> 00:05:01,800 These are where we are going to make our requests from. 69 00:05:01,800 --> 00:05:06,360 So back here inside this diagram we said we're going to call a function that's going to make a request 70 00:05:06,540 --> 00:05:11,280 to the Jason server that's gonna be our action functions inside of our action functions we're going 71 00:05:11,280 --> 00:05:17,370 to write out some code to make that request get the response and then dispatch an action with all of 72 00:05:17,370 --> 00:05:21,940 the different blog posts that we just found now. 73 00:05:21,960 --> 00:05:27,210 At present we don't actually have a action function to get a list of blog posts right now if we open 74 00:05:27,210 --> 00:05:28,550 up our index screen. 75 00:05:28,620 --> 00:05:33,240 This thing just reads our state directly off that context object because there's no need to actually 76 00:05:33,240 --> 00:05:34,890 fetch any posts. 77 00:05:35,130 --> 00:05:40,380 So we need to create a new action function that's going to make that request get the response and then 78 00:05:40,380 --> 00:05:47,400 dispatch an action to write above add a blog post I'll add in a new function that I'll call get blog 79 00:05:47,490 --> 00:05:48,880 posts. 80 00:05:49,020 --> 00:05:57,320 This will be called with our dispatch and inside we'll return a function like so now inside this inner 81 00:05:57,320 --> 00:06:02,000 function we probably want to make use of some async await syntax because we're going to be making a 82 00:06:02,000 --> 00:06:03,200 network request. 83 00:06:03,290 --> 00:06:09,310 So going to mark this function as async like so then inside of here we can make our network request. 84 00:06:09,340 --> 00:06:16,150 So I'll say a wait Jason server dot get And remember if we want to get our list of blog posts we're 85 00:06:16,150 --> 00:06:22,470 going to make this request to slash blog posts that will give us back all the different blog posts that 86 00:06:22,480 --> 00:06:31,450 we have so I'm gonna make the request to slash blog posts like so remember any route that we put inside 87 00:06:31,450 --> 00:06:37,150 of here will be contaminated with a base year L that we specified inside of our configuration over here 88 00:06:37,780 --> 00:06:44,990 so we end up with this year l slash blog posts OK so that's going to give us some response that all 89 00:06:44,990 --> 00:06:51,260 assigned to a variable like so and remember the response dot data property that's where our list of 90 00:06:51,260 --> 00:06:52,630 blog posts is going to be. 91 00:06:53,190 --> 00:07:00,050 So Jason or me in response that data will be an array of objects like so where every object is our blog 92 00:07:00,050 --> 00:07:05,120 post at present we don't have any blog posts on our server but that's OK we'll eventually add some in 93 00:07:06,900 --> 00:07:12,120 now I just noticed I made a little typo there on response so I'll fix that up really quickly and now 94 00:07:12,150 --> 00:07:18,970 we can add in a call to our dispatch function when we dispatch we're going to add in all the data that 95 00:07:18,970 --> 00:07:24,520 we just got back from that API and it will then be up to our reduced right here to capture that data 96 00:07:24,670 --> 00:07:32,400 and return it so after getting back the response I'll call dispatch I'm going to put it in a type of 97 00:07:32,970 --> 00:07:43,840 get blog posts and a payload of response dot data. 98 00:07:43,910 --> 00:07:44,130 Okay. 99 00:07:44,190 --> 00:07:47,430 So now we're going to dispatch this object right here. 100 00:07:47,460 --> 00:07:51,670 Remember what happens whenever we call dispatch react is gonna take that object. 101 00:07:51,750 --> 00:07:55,230 It's then going to automatically call our reducer. 102 00:07:55,230 --> 00:07:59,650 That object is then going to be righted as the second argument to our reducer. 103 00:07:59,680 --> 00:08:06,000 So now we need to add in a new case to our switch statement and watch for a type of get underscore blog 104 00:08:06,000 --> 00:08:18,090 posts so inside of my reducer allowed in a case or get blog posts and whenever we see this action come 105 00:08:18,090 --> 00:08:24,380 across we're going to return our new state value which is return action Dot. 106 00:08:24,480 --> 00:08:27,430 Payload and that's pretty much it. 107 00:08:27,610 --> 00:08:32,740 You'll notice in this case we did not do anything like put in a new array and say dot dot dot state 108 00:08:33,010 --> 00:08:34,120 and so on. 109 00:08:34,120 --> 00:08:38,530 The reason for that is that whenever we get a response back from the API our assumption is that the 110 00:08:38,530 --> 00:08:43,230 API is always the total source of truth of information inside of our app. 111 00:08:43,750 --> 00:08:47,110 So when we get this response back from the API that list of blog posts. 112 00:08:47,170 --> 00:08:51,150 That is the total list of blog posts that's it and nothing else. 113 00:08:51,220 --> 00:08:55,920 So we don't try to add this new response right here onto any existing state. 114 00:08:55,930 --> 00:09:01,290 Instead we replace all of our existing state with it because like I said it is the total source of truth. 115 00:09:01,370 --> 00:09:06,420 It is 100 percent correct and describes exactly what our information should be inside of our application. 116 00:09:08,060 --> 00:09:08,420 OK. 117 00:09:08,460 --> 00:09:12,990 So now the very last thing we have to do inside this file we just created that function get blog posts 118 00:09:13,110 --> 00:09:16,730 and now we want to make sure it is available to all the different components inside of our app. 119 00:09:18,540 --> 00:09:24,770 So to make sure it's available we need to go down to the very bottom find our object right here. 120 00:09:24,770 --> 00:09:29,690 Remember that object is what makes of it this list of functions available to everything else inside 121 00:09:29,690 --> 00:09:30,750 of our app. 122 00:09:30,770 --> 00:09:37,550 So on there I'll add on a new key of get blog posts like some while we're looking down here. 123 00:09:37,550 --> 00:09:42,410 One other thing I wanna mention is that remember when our application first starts up we created a kind 124 00:09:42,410 --> 00:09:46,830 of dummy blog post right here because this third argument is our initial state. 125 00:09:47,120 --> 00:09:51,620 Now that we have a list of blog posts that are going to be coming back from this API we really don't 126 00:09:51,620 --> 00:09:53,920 need that initial data anymore. 127 00:09:54,050 --> 00:09:57,980 It's going to delete that object and I'll leave behind just the empty array. 128 00:09:58,010 --> 00:10:02,930 So our initial state when our application first loads up is a empty array which means we do not yet 129 00:10:02,930 --> 00:10:05,960 have any blog posts at all. 130 00:10:06,040 --> 00:10:09,070 So I'll save this and we'll take a quick pause right here. 131 00:10:09,070 --> 00:10:13,680 The last thing we have to do is make sure that we call get blog posts from our index screen. 132 00:10:13,770 --> 00:10:15,240 So we'll take care of that in the next video.