Redux Setup and Fruit List Component Creation

Welcome back everyone. So I'm trying to go a little bit quicker here and setting up Redux because I assume we already have some knowledge of Redux and this course is not really about Redux but about the middle area Redux. Even though I'm trying to go fast I'm trying to also let you know of everything and give you a review of Redux if you don't remember things clearly. Anyway I don't want to skip or step over things too fast. Let's keep going then. So let's define map state to props right here. So right now if you look back at the Redux now we have an initial property fruits with an array of objects. That's great. So we go back to app.js. We define map state to props. Now I want to be able to access the list of fruits using the property fruits. Could be any property name you want. So how can I get the fruits? Well that's in the state right but the state has is an object that has what the fruits property. So we can just say that state.fruits. And that will give you the fruits. That's it. So this guy will be injected as prop called fruits so we can access it with this prop.fruits. Great that's good. Let's do a console log in the random method here for the app. How about that? So under the random method put a console log and say this prop props like so. We just want to know what's in the props for this given to app. And we're gonna see we hope that fruits is there. Now let's save it. Notice the console log is under render. Don't make the mistake of doing this. Alright. So let's get back to the browser. So I already have my console right here at the bottom. If you take a look there's this prop right the console log is an object and you can see oh this object has two properties. The first property is called dispatch which is a function. And this is a function that's used to emit actions right, to reduce actions. And you can see also the fruits is here. So if you go back to here that's from app state to prop. So you couldn't have pass null. What happens if pass null pass nothing or nothing right. See what happens. So I have nothing to connect the first set of parentheses. I'm gonna see what's happening here. You'll see the average only has dispatch now. So connect added the prop dispatch so we can dispatch actions. Now I'll go back to add on here. I'm gonna revert and add the map state to props there. So we can see finally finally the fruits we can access it using this prop's dot fruits right here. See Apple origin strawberry. That's great. So we hooked up redux successfully. Great. Anyway let's keep going. So that is great. So we hooked it up successfully. Now we want to be able to pass it to the list of fruits. Now we kind of wanted to do the step by step. But let's do step four right here right now. How about that? But using fake data. So in place of this fruit list we're gonna make an actual fruit list component. So we're gonna call it fruit list like so. And then we're gonna pass a prop right. I'm gonna say fruits. And I'm just gonna pass this props to this props that fruits. That's it. But we have to define this component. So let's do it as our secret new file got fruit list. fruit list.js in capital case. Let's make this guy a stateless functional stateless functional component because we don't really care about keeping state and it's pretty simple. Okay. How about that? So let me make a function. call it fruit list. So function that takes first argument props. And then you return the template for this guy. So this is a stateless functional component. It's very simple. It just takes one parameter called props and the return is actually the render equivalent to the rendered function. Right. We're just gonna return the ul on our list. And we're gonna map props.fruits. We're gonna generate for each fruit li component. Okay. So a fruit. We're gonna return li component. With the fruit.name. Since we are doing map react will warn you you need a key. So let's use the fruit ID as the key. Now it's all good but we have to always import react from react because we're using jsx right here. And okay. Now finally if we export you can just default if you want the fruit list component. Okay. So let's review what we did here. So we created a component just just a function that props. That's the props it receives as the first argument. So we return a template with a ul. Now we want to generate li component element or component for each fruit. So fruit is given as props props out fruits. So for that we use the map function that would take every fruit and generate a list right with li's. Now we use a key the fruit ID as key because otherwise react will complain about not having key. And we use the fruit name as the actual content of this element. Notice I'm using many shorthands of ESX so here you don't really need the parenthesis. It's optional if you only have one argument. Here too same thing okay. And here is an implicit return. I don't have the keyword return but it's implicitly because it's a narrow function and I implicit return an li. Okay. It's actually same as this guy. All right. Anyway probably know that or not. Let's save this though that's great. Looking good this fruit list component very simple. Let's go back to app. Now we using fruit list here past the fruits as prop right. But we need to import it because it's saying it's not defined. So let's do it. We're going to go up here before I touch it. Yes. So whatever import fruit list from dot slash fruit list because it's in the same directory. That's great. Let's test it out. Go back to the browser. So now you can see apple orange is strawberry in a bullet list. That's great. Everything worked fine. So we have finished this lesson. We hooked up the maps day two props and we successfully created the fruit list component. Okay. So let's take a break and I'll see you in the next lesson.