1 00:00:00,680 --> 00:00:04,600 I'll write my friends in this video we're going to start working on our next application to get a better 2 00:00:04,600 --> 00:00:06,280 idea of how redux works. 3 00:00:06,460 --> 00:00:09,970 We're going to first by talking about the application we're going to build and some of the objectives 4 00:00:09,970 --> 00:00:14,360 inside of it and really highlight what we're going to try to understand inside the redux world. 5 00:00:14,440 --> 00:00:15,980 So let's get to it now. 6 00:00:16,000 --> 00:00:18,150 First off a little bit of a disclaimer here. 7 00:00:18,160 --> 00:00:22,570 I feel compelled to tell you this the application we're going to be building is going to be a little 8 00:00:22,570 --> 00:00:26,800 bit plain and it's going to remind you of some of the very simple applications we worked on back when 9 00:00:26,800 --> 00:00:32,200 we were talking about re-act earlier on inside this course but this application is going to be very 10 00:00:32,200 --> 00:00:35,100 plain for a very good reason. 11 00:00:35,140 --> 00:00:39,630 We are going to be talking about some pretty complex things and complex topics in the redux world. 12 00:00:39,820 --> 00:00:41,070 I'll be completely honest with you. 13 00:00:41,080 --> 00:00:47,980 I actually already recorded this video and the next like about 70 or so building a completely different 14 00:00:47,980 --> 00:00:48,670 application. 15 00:00:48,670 --> 00:00:54,700 So I already recorded like one version of this application and the apple is really complicated and I 16 00:00:54,700 --> 00:00:55,660 can even show you proof. 17 00:00:55,680 --> 00:01:00,270 You know here's all the videos when the initial version of this out that I put together and the app 18 00:01:00,270 --> 00:01:02,160 that it showed was really complicated. 19 00:01:02,170 --> 00:01:06,730 And at the end of the day even though the app was more interesting it ended up being really really challenging 20 00:01:06,730 --> 00:01:08,490 to understand what is going on. 21 00:01:08,680 --> 00:01:15,250 So the purpose of this app is to teach you more about redux and having a neat application is really 22 00:01:15,250 --> 00:01:17,110 kind of like a side concern. 23 00:01:17,110 --> 00:01:22,210 We're really not concerned with making a super awesome app just yet because we're still in this learning 24 00:01:22,210 --> 00:01:23,400 mode of sorts. 25 00:01:23,410 --> 00:01:28,330 Remember right now as far as difficulty curve around redux goes for still at this upper plateau right 26 00:01:28,330 --> 00:01:32,550 here and we need to get over to this kind of big dip as soon as we possibly can. 27 00:01:32,560 --> 00:01:35,460 So this is going to be the last like kind of boring application. 28 00:01:35,530 --> 00:01:38,670 And then I promise you we're going to look at some really interesting apps. 29 00:01:38,850 --> 00:01:39,080 OK. 30 00:01:39,100 --> 00:01:41,230 So enough of that what are we going to build. 31 00:01:41,380 --> 00:01:42,670 And what's our goals here. 32 00:01:43,030 --> 00:01:48,430 So the big goals for this application we need to really understand the purpose of reducers. 33 00:01:48,580 --> 00:01:52,960 We've already taken a look at a couple of reducers I gave you an analogy of how they work and we put 34 00:01:52,960 --> 00:01:54,420 together some code for one or two. 35 00:01:54,430 --> 00:01:59,920 But in this application I want you to get a crystal clear understanding of the purpose of reducers and 36 00:01:59,920 --> 00:02:01,820 exactly how they work internally. 37 00:02:02,290 --> 00:02:06,370 We're going to eventually take a look at some of the redux source code so that you can understand a 38 00:02:06,370 --> 00:02:09,960 behind the scenes exactly what a producer is doing. 39 00:02:10,020 --> 00:02:14,340 Next up we're going to get total understanding on how we make API requests with redux. 40 00:02:14,460 --> 00:02:20,010 So we're going to reach to some outside API get some data and return it back into our redux application 41 00:02:20,160 --> 00:02:22,650 and then somehow work with it in some fashion. 42 00:02:22,650 --> 00:02:27,660 And then finally we're going to start to understand the purpose of middleware inside of redux specifically 43 00:02:27,660 --> 00:02:29,420 a middleware called redux. 44 00:02:29,420 --> 00:02:31,990 Thunk we haven't spoken about middleware at all just yet. 45 00:02:32,010 --> 00:02:33,710 That's going to be a big new topic. 46 00:02:33,930 --> 00:02:35,120 All right so that's our big goals. 47 00:02:35,130 --> 00:02:38,610 So now with all that buildup Let me show you this application. 48 00:02:38,770 --> 00:02:39,840 So yeah this is it. 49 00:02:39,840 --> 00:02:41,580 Like I said pretty straightforward. 50 00:02:41,730 --> 00:02:46,140 We're going to essentially be rendering a list of blog posts on the screen that we're going to fetch 51 00:02:46,200 --> 00:02:48,060 from some outside API. 52 00:02:48,360 --> 00:02:50,720 So we're going to have a series of elements here. 53 00:02:50,730 --> 00:02:56,040 Each one is going to show the title of a blog post the body of the blog posts like actual content and 54 00:02:56,040 --> 00:03:00,240 then underneath that we'll put some author's name and then on the left hand side over here is going 55 00:03:00,240 --> 00:03:03,860 to be just a simple icon not a picture just a simple icon. 56 00:03:04,200 --> 00:03:04,580 So yeah. 57 00:03:04,590 --> 00:03:10,330 Like I said the application itself is very boring but our goals here are to really understand redux. 58 00:03:10,350 --> 00:03:15,420 And once we get this really great understanding then we're going to focus on building the cool apps. 59 00:03:15,450 --> 00:03:15,720 All right. 60 00:03:15,720 --> 00:03:20,430 So thinking about this application I think that we only need two distinct components to really put this 61 00:03:20,430 --> 00:03:21,790 together. 62 00:03:21,840 --> 00:03:26,520 We're going to make a component called the post list which is going to render the entire list of blog 63 00:03:26,520 --> 00:03:32,100 posts and then very interestingly this is going to be kind of a nonstandard thing that we do we're going 64 00:03:32,100 --> 00:03:37,980 to render it the author's name right here like that single little div with some text inside of it from 65 00:03:38,010 --> 00:03:40,860 a component that we're going to call the user Hetter. 66 00:03:40,860 --> 00:03:45,150 Now the reason we're going to split that off into a separate component is going to be a lot more obvious 67 00:03:45,150 --> 00:03:50,700 once we start to take a look at how we fetch data from an outside API and make use of it inside of application. 68 00:03:50,700 --> 00:03:54,860 So for right now we'll just say yeah we're going to kind of have this interesting component set up. 69 00:03:54,870 --> 00:03:58,830 But the reason that we're splitting out that single little head or two a separate component is going 70 00:03:58,830 --> 00:04:01,020 to be obvious in just a little bit. 71 00:04:01,020 --> 00:04:04,650 All right so now the next thing I want to show you very quickly is where we are going to fetch this 72 00:04:04,650 --> 00:04:05,790 data from. 73 00:04:05,790 --> 00:04:10,830 Remember we're going to get this list of blog post to show on the screen from some outside API. 74 00:04:10,830 --> 00:04:13,660 So we're going to be putting together our application. 75 00:04:13,710 --> 00:04:19,650 We're going to use axially to make a request over to a free public service called the Jaison placeholder 76 00:04:19,680 --> 00:04:20,530 API. 77 00:04:20,850 --> 00:04:26,010 JS some placeholder API is not terribly unlike that faker module that we worked with much earlier in 78 00:04:26,000 --> 00:04:26,780 the course. 79 00:04:26,790 --> 00:04:31,830 It essentially just has a bunch of fake data that we can freely request to and get access to and load 80 00:04:31,830 --> 00:04:37,290 up into our application very commonly used any time that you just need some stand in source of information 81 00:04:37,770 --> 00:04:41,880 to kind of demonstrate how making API requests work. 82 00:04:41,930 --> 00:04:47,310 Let's very quickly take a look at some of the documentation around that API so we can go to Jason placeholder 83 00:04:47,630 --> 00:04:50,060 type code dot com. 84 00:04:50,360 --> 00:04:51,330 I'm going to take that link. 85 00:04:51,380 --> 00:04:54,450 Open up a new tab and head on over to it. 86 00:04:54,470 --> 00:04:54,820 All right. 87 00:04:54,820 --> 00:04:57,970 So this is the J someplace holder API. 88 00:04:58,060 --> 00:05:02,770 We can take a look a little bit down here and find a section called resources. 89 00:05:02,800 --> 00:05:08,290 So these are six different end points so we can make requests to get back a ton of fake data. 90 00:05:08,660 --> 00:05:13,420 But once that we are going to care about is the posts and point right here and the user's end point 91 00:05:13,420 --> 00:05:14,460 right here. 92 00:05:14,470 --> 00:05:21,350 So if I click on those in a new tab it'll open up a whole bunch of Jaison like you see right here. 93 00:05:21,360 --> 00:05:24,500 Now notice on my screen this is all formatted nice and pretty. 94 00:05:24,500 --> 00:05:29,270 It is because I have a Chrome extension that automatically formats Jason data on the screen. 95 00:05:29,520 --> 00:05:34,800 So when I take a look at this list of posts right here you'll see that every post object has a title 96 00:05:35,130 --> 00:05:36,660 has a body. 97 00:05:36,660 --> 00:05:43,410 The post itself has an ID and then it also has a reference to the user who created the post as well. 98 00:05:43,410 --> 00:05:49,980 So in this case user with ID one created this blog post this blog post this blog post and like basically 99 00:05:49,980 --> 00:05:55,350 the first 10 or so on here and then eventually it flips on over to blog post created by user ID number 100 00:05:55,350 --> 00:05:56,600 two. 101 00:05:56,640 --> 00:06:01,440 So if we want to figure out who each of those users are we would have to make a second request over 102 00:06:01,440 --> 00:06:05,860 to this users and point and click on users open it up in a new tab. 103 00:06:06,140 --> 00:06:10,560 And now this will show me a list of different users that can be returned from this API. 104 00:06:11,010 --> 00:06:12,720 So here's a user with ID 1. 105 00:06:12,870 --> 00:06:14,720 So in that case its Leon Graham. 106 00:06:14,730 --> 00:06:16,460 And again this is a fake person. 107 00:06:16,620 --> 00:06:22,640 So Leon Graham is the person who created this blog post this one this one and so on. 108 00:06:22,800 --> 00:06:27,230 And then as you might imagine we can go down here a little bit more and see who created blog post number 109 00:06:27,460 --> 00:06:30,080 or see me the author with ID number two. 110 00:06:30,090 --> 00:06:36,720 That is the person who created all of these blog posts down here the ones with user id of to to do and 111 00:06:36,720 --> 00:06:37,790 so on. 112 00:06:37,800 --> 00:06:40,140 So this source of data is going to be pretty straight forward. 113 00:06:40,140 --> 00:06:44,580 The only complication here is that essentially theres two separate endpoints that we're going to have 114 00:06:44,580 --> 00:06:50,270 to make requests to to get all the information that we need to show this list of blog posts on the screen. 115 00:06:50,350 --> 00:06:55,420 We're going to first have to make a request to just get the list of blog posts on the left to make a 116 00:06:55,420 --> 00:06:59,520 follow up request to get each individual author's name to show on there. 117 00:06:59,770 --> 00:07:02,700 But we'll get the details on that on just a little bit. 118 00:07:02,830 --> 00:07:06,580 Right now let's flip back over to our terminal and we're going to generate a new project and we'll start 119 00:07:06,580 --> 00:07:08,330 working on it in the next video. 120 00:07:08,830 --> 00:07:13,110 All right so you'll notice that I've already changed back to my workspace directory of sorts right here. 121 00:07:13,120 --> 00:07:18,960 So inside this folder I'm going to create re-act app and we're going to call this application about 122 00:07:19,630 --> 00:07:20,770 now up business. 123 00:07:20,770 --> 00:07:25,420 Originally I'd kind of wanted this to be like a business thing application but instead it's really a 124 00:07:25,420 --> 00:07:26,330 list of blog posts. 125 00:07:26,330 --> 00:07:30,210 So let's just call it blog like so. 126 00:07:30,240 --> 00:07:30,480 All right. 127 00:07:30,480 --> 00:07:32,650 So that's going to fetch a couple of dependencies for us. 128 00:07:32,730 --> 00:07:33,760 Let's take a pause right here. 129 00:07:33,780 --> 00:07:36,520 When we come back the next section we're going to start working on our application.