[00:00:01] And welcome back. In the last time we talked about the Riyadh Browner link that you see here. So we could navigate to our specific items when we click on them and also introduce this area into our application where it basically renders all of our items. Again we're just going to pull this off to the side now and then this guy. We're going to implement react redux. We're going to implement redux into this component so we can fetch the correct dial. So it was kind of thinking the logic here. First we need to load up this component. We need to write our code that will allow us to dispatch an action not going to be an action. Right. And basically what this action is going to do is it's going to take the city it's going to go to our state and it's going to filter through our archive in our newsletter reducer. And it's going to return to us or provide us a new piece of state that is going to be called satire or a detail I will never get to it. So let's go ahead and let's get to it. Let's head a little closer. All of our files here. And let's just open up the ones we need. So we know we need inducer because we were going to write a new reducer or a return of some state to return a piece of state to our user. [00:01:29][88.0]
[00:01:30] So we need our reproducer he save to make sure it stays open and when you know reducer and then we also need our actions so it's an index you know types and then we need our down five files. Make sure those are all open. And let's think about this cave first thing we need to do is declare an action called Fetch newsletter by ID so say export constant News newsletter by ID I was just typed again. OK we don't need the heights anymore let's close it off and let's implement our action. So it's important here to put this on the new line so we can read unclear and just can say for 30 or newsletter or archive and fetch newsletter by hand. OK now we just need to declare a function here so we can use it in our newsletter detail. Export default. Not the all export function fetch newsletter by ID. So basically the same thing this except for different case formatting that is by the pension's LETTER BY ID. Now all we have to do is return. Since we're not going to be using redux thank when we want to type teche newsletter Id buy ID and for our payload we need to provide our ID salinski ID and let's just put it as an underscore just so we can kind of be consistent with what our model property is called. And what's fascinating here as a parameter. Okay. And we don't want to return thats what we do. We just needed to be and not an object. So lets cut this and throw it in an object. Okay. We have the action set up lets get rid of our action file. Now all we're left with is or Itote component which will keep up in our newsletter reducer and early. [00:03:34][124.1]
[00:03:36] Now when I think about it we don't need our route reduced since this will be the same producer. So we can just eliminate that file right now not eliminate it because of it. And I will read it all we are dealing with are these two files. So let's go ahead and type the case fetch newsletter. So again let's put this on the line. And what's important. That's news letter by ID. And then we want to add this case. And then we'll think about what we want to do and we don't want. First let's just pipe out return because we know we're going to want returns and stay. We're not going to want to modify archive and we're just going want to add new properties let's just state that we'll handle everything and archiving everything else leave it untouched. It will just spread it out. In you object. Since we're talking a minute mutated and then let's put it in a new state and we want to call this fetched let's call let's let's see what do we have this latest item. Yeah let's call it fetched. So this is going to be this is going to be filled with buying where we're going to fetch from our archive. We're not going to fetch it from the internet from our server. Hence why we didn't use redux lunk we're simply going to fetch it from our archive. So let's say let's get out of here now. What's the concept first item is equal to. And then let's find it in our in our archive. [00:05:15][99.2]
[00:05:16] So it's a state archive to find which is a Javascript function and it says Okay takes some let's see. Let's click on it. I guess we can't. But yeah let's just say maybe it's fine. I guess it's just my case state archives are fine and I'm not saying put it in some brackets here are some parentheses and say object and then. So basically what it say here here is returning us these items saying or it's giving us a print irruptions we can provide it. It's going to say OK. It's been returned to us by the index and an object Hillary. So all you need to worry about is the value and the index. So say object an index I mean you don't even need the index but all 11am. Get rid of it. We don't need it. And then the return trip of this is going to be Boonmee and so they return True return. We want to return true once we are going to return true. OK. So let's just say if and we know this takes away an I.D. into our action I'll pay Motyl and see if action rather than say save object which is going to be our items not ID is equal to action payload. So he is equal to the you were fetching. We simply want to first fix this since it's not going to return us the item I'm pretty used to the Swift Programming Language. And there's a similar function to that is that you can use that will return the actual item. I don't think javascript allows this function so simply what we have to do is declare a variable here and call it. Or better yet we can just. Yeah let's do this. [00:07:11][115.4]
[00:07:12] We call them and say OK it's equal to an empty object. It's not worth anything. Let's call it that way we can just leave it like this. We don't say OK if it's the same the first item is equal to object. OK. We should be good. Let's go ahead and see how this worked in our application but real quick ones make sure we're doing everything right and let's just leave this up. OK so it's not going to work in here just not doing anything fetching it. We have to import. We have to set up our reliance so let's say import connect Brown react from redux and then down here we want to use connects and connect. We don't have the process let's say whose letter detail. Now let's step out a function the props and we said we want to return or stay at peace. We want to access the state first and then put this on here. OK. Now let's throw this in here massive the props. We don't have the actions that we wanted to yet. So that is embargo's. Give us our actions which are our functions and just so you really understand what's going on here on command clicking actions. Those are these functions here. We want to explore the fall function pensions that are by the clothes actions are going to go in here as we're actions into our Connect function. OK now we can AmEx's our props. So let's right in component. Did Matt and you touch it this props that showed this props up for each item by item. [00:09:11][119.7]
[00:09:13] And then remember that it takes in a parameter which is going to be idea which is in our interview. So let's go ahead and get that and let's just throw it into we'll see how we can do this. This guy is doing a little bit long. I'm going to come this out and just and we'll get into that in the next guy so you can take a breather try and go through all the files. We just modified which are the index the types and then the reducer and this index and try to understand what we did and then I'll see in the next guide where we will continue setting up our newsletter detail with redux command status out get command set up action reducer for fetching the item detail. Okay I'll catch the next guy. [00:09:13][0.0]
[546.5]