Fetching Newsletter Items in the React Property Management App
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:02] Hi. Welcome back to the reactor building up in the last guy we set up all of our redux and our react but we ended the video a bit earlier redux in our store with our newsletter. But we ended the video early because it was going on and it might be a walk to kind of comprehend all of this. So in this guy we're going to actually fetch the item and see if it all works will we just rolled out. So if you successfully were able to go through all that kind of understand the flaw of that then you'd probably already done this yourself. But let's go ahead and do it now. Yeah. So they're trying to buy the first thing I noticed after I ended that guy. Was that it's not called Fetch I have my ID. It's called French newsletter. And I noticed I also made all the capitals of Futch newsletter via IDs. So first thing I want to do is make sure that we don't belong there. I want to keep things the same so let's go to our let's go to our index Jacen or actions and let's just make sure let's lowercase all Killens get out of there and get a newsletter detail. Keep refreshing it and then we need a pass and Brown might be wondering how the heck do we get access to this. That's pretty easy it's part of our props. All we have to say is it's logging out so Mbak takes one to say the idea is and then in curly races you say this stuff prompts match Match.com dot ID and let's see. [00:01:41][99.5]
[00:01:41] So I'm trying to remember if we call it Lurky city or or a radio or just an idea. So let's just remember it's just an idea. Let's go to our route and change after show you why this doesn't work if we just do this for ID it's not going to work and you're going to have to go back to use later. Each time we do this it says these undefined. And that's because in our strategy here we don't have an underscore there. So it's just now getting old quick and see it get out of there and it should work. Now let's go back here. Let's go to a newsletter and we'll take one of these and it says the idea is and then the super awesome stuff. Now we just need to pass that into our batch newsletter ready so it's copy this and let's throw it in there now. Save it and go back here. Let's go right to newsletter. Let's tap one of these and you'll notice that nothing happens. And that's because one thing we're not displaying anything in here we're just saying use a little detail on the second reason is nothing's going to be displayed here because we're simply saying stayed up past item and the reason that data is not going to work is because in our index dropped Jason reducers we don't have that and we don't have fetched anyone here it's in our newsletter. So what we have to do is go to a newsletter and say we're not reducers but our detailed component and state first item or state DOT newsletter finished item. [00:03:16][94.7]
[00:03:17] This will allow us to go into our reproducer here hit newsletter and hop in here and select the next day and see if we can all go back to that in the next day. So we have our fixed item lets just log it out. We were having it OK. Same thing is that I mean save it. I'm going to get rid of this and I'm going to click on one of these archived items and we have it says Id season a Thanksgiving and so on. So I think there might be a better way we can actually break the reducers for this. Let's go to a newsletter reducer and look at it. So right now we're just saying states that are kind of find and then we're setting it equal to that. But I google this really quick radar prototype got find it just google the find method in Javascript or something. Find javascript is the first one and says Keda find method returns the value the first element in the rate and satisfies the provided testing function. So basically it's going ahead and this is going to say OK the first one is greater than 10 return so it's going to be 12. If there is like you'll notice that these are also greater than 10 but 12 was the first one grader. We don't need to really worry about why it is more about this functionality because all of our IDs are really unique. So yeah. I'm unique there's never going to be a value that is the same. So we need to just return. So like what we can do is say in this example to make it more like ours. [00:05:02][104.8]
[00:05:03] Let's call these IDs or let's call these objects. Haimes. And then we want to go through our archive items and then each of these are going to have an ID right and so each of these are going to be objects and they're each can have an ID. So I'm just going to replace them all with and put IDs so the 12 88 18 I don't remember that number yet another number. Okay so basically we're going to say okay and back in our coteries the object 3 nighties. Do you actually have payload which is the end you were searching for. So if I say if our let's say we're searching for this let's say we want. This is our action topic our action was color purple so payload on say concept payload is equal to what we want to find the object 12. So payload or if it's right this is an arrow function so well we can just do this. This is the same thing as an arrow function. If I get a function to do that and now get off my index. So in the end you print it out the index superspy 1 because interfaces 0 1 2 3 that we don't even know about. Let's get rid of that. You can also get really predecease if you're using her function. [00:06:34][91.0]
[00:06:35] So no I have to say if Paon for her case and the way we're doing it we're comparing the object for so if object type ID is equal to payload then we just want to access the site and we're doing that by setting it to patched and I said in the last guide that you couldn't just return it but you actually can so we can say return object. So the return is 12 and then it's going to print out this object which could have a title as well. Right so yes something like that in the design here season Thanksgiving or some junk but if we we're run we get it. Which is awesome. So probably a little bit too in-depth here. I mean you probably already understood what was going on but this is this is what I do when I need to figure something out. Javascript. They actually have pretty good docs here. And I used think that E3 was better but they've really stepped up their game. I don't remember seeing this before but it's really good resource mesons here and you can live connoted or someone. So that's a good resource. Basically we have we have that way of doing it so we don't have to have this constant up here to this very will make all messy all we have to say is constant that Shaitan is equal to and then it will get us right. It's all dandy. We also just need to return here a subset of people returning object and we can also rename this we don't use the index so we just get rid of this entirety and say For Newsletter Item number can just return on them and compare that and my work. So let's save that and check it out. Let's go back to his letter and click on one don't get him yet. OK. Next thing I want to do is show you a better way to do this. We don't even. [00:08:39][124.1]
[00:08:39] Well it's probably better to do this because it's more clear but if we really wanted to we could just cut that out then we can take this entire thing right here and just set it on fresh Techa which is actually something you don't really want to do because it's super messy. But if that helps you better understand what we're doing. It's just another way of doing it then that's good. So that should work the same. Yeah I'm going to change it back to a constant here so it's a little more separated. So it's a little more clear when other developers want to work on the Zapf if there ever happens to be another person working. There's a very Lehmann's clear. So let's go ahead and let's get the content rendered on screen. And in the next guide I'll show you a way we might be able to get rid of users but let's get the content on the screen so we quick it we get the item has already it's the same ID we have are all over information. So we look at a design we want to display the body on display. The title and an image which can easily be done now at the end of the day. So get out of our producer here and that means get out of this review. We just left for 30 days. Now what we want to do is get rid of these cons. logs since we don't need them. You know it's happening and we need to display this item on the screen. [00:10:07][88.3]
[00:10:09] So I'll just say that for the next guy let's go ahead Twitter code now and then get into that status and get it fixed fixed some safe searched. I know from from archive based on this action producer we said okay I'll go ahead and on the video here and we'll hop into the actual splitting of the atom in the next guy. [00:10:09][0.0]
[602.3]