So in this video we're going to set up another action creator to fetch some products and then we're going to display them in our application. So let's start off by going up here and going into shop.js and let's basically just copy the entire fetchShopCategories action creator and let's call it fetchShopProducts, right.

Then in here we want to SET_SHOP_PRODUCTS and then we obviously have to create this type. So let's put it up here in our import and go into our types and underneath here will say export const SET_SHOP_PRODUCTS and I know we're not using SET_SHOP_PRODUCTS categories but let's just leave it there just in case we need it at some point.

Okay, let's close out of here and now what we need to do is actually make these products. So they're going to have an ID, they're going to have a title, and let's go get some of those titles from the design. Okay so we've got JavaScript in the browser and then they have a description, and a price, and an amount. All right, so let's just start putting those in here. We got the title, we got a description, we got a price, and then we have a quantity selected.

It's important that we use quantity because with how a strip works you have to specify the quantity of the amount you're purchasing right. It's not called amount, it's called quantity in strip. So we want to be close to that, we don't want to call it amount. I think actually the price might be called amount in stripe, it doesn't matter though because it's just front end we're not even hooking this part up to the database yet.

Okay so that's it, let's go ahead and give it the title 'JavaScript In The Browser', I think that's what it's called. Now we're going to get these all the same text because the title is obviously enough to differentiate them and the description we don't want to spend time writing a description. So let's go ahead and get some dummy text.

'The FitnessGram™ Pacer Test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20 meter pacer test will begin in 30 seconds. ... The running speed starts slowly, but gets faster each minute after you hear this signal.'

Okay, that's my dummy text. All right the fitnessGram Pacer Test, all right high school days. And then let's call the price 1.99 and we want this to be a number, so don't put a dollar sign and the quantity we're going to put default, well we don't want to put quantity because this isn't our cart. Okay, the quantity is going to be in the cart product, this is just a product that you can purchase. All right now what we want to do is copy the title description price and just so we don't have to reput in all the id's we're just going to paste over all these titles okay, we got the products in here.

Let's go ahead and give them unique names so Graph Database, Full Stack Development, all right and we have JavaScript Development and we got User Interface Design and let's actually put Javascript Development in there even though we already have a Javascript Development for one just cuz we're going to have it belong to the same category of JavaScript obviously.

User Experience design put that in, and then we'll put in Advanced Object Oriented Programming. Okay, I'm going to call this one Advanced OOP for Object Oriented Programming, all right, and that's good. Now what we need to do is introduce one more attribute in here because right now they're just products and it says nothing about what category they belong to, so we have to make another attribute and say belongs to.

Now by default they're all going to belong to the all category, so we're going to put that id in which is zero, remember all is zero okay. And then now we just need to map these over to our products right, so javascript will be one. So JavaScript's going to be one, and then let's copy this and put this in all these okay so we're putting these all in.

All right, so now we just need to map them over correctly, so UI/UX is 2. So let's go to the user interface design and put 2, and then for user experience design we'll put 2 instead of 1. And these could have a few categories but we don't have an instance where it is okay, well Full Stack Development might belong to JavaScript and python right.

So we'll do that, we'll say full stack is 1 and 4, because javascript and python is full stack. So full stack development belongs to JavaScript and Python. Let's see UML, I didn't realize UML was a category, I guess it doesn't matter, okay advanced OOP is going to belong to Ruby that's a ruby category, so let's put 6 here.

Alright, so basically these are all mapped over correctly now, we've got belongs too, graph database doesn't belong to JavaScript, well just leave it there to give it another category, we'll put it into 6 just to give Ruby another category even if it's not really. Okay so make sure you get all of these in, we have the relationships here, belongs to right, think of these as IDs to the categories.

So what we need to do now is basically when we click, we'll we need to fetch these first so let's go into our shop.js component and we need to fetch the product, so fetch shop products, alright and we already fetched the navbar links and set them so we just need to filter them now. And we need to this.props.fetch, what was it called? fetchShopProducts, here we need to include this function in the index.js array.

We need to import it from shop and we need to export it out of this index.js function. All right, so that's all set up, now we have them fetching and we need to set them because right now if you go to user.js in our actions. All we're doing is saying Set Shop Products, we don't actually have a reducer to handle this. So what we need to do is we need to go down to our shop reducer and we need to import that types and then we need to develop the case for it.

Okay so set shop products right, make sure it says SET_SHOP_PRODUCTS and then we'll say instead of over writing categories we'll overwrite products and then we need to introduce that into our array so let's say products into our state. Okay so this should set it, let's go ahead and give it a shot. Let's go to our application. All right let's open redux devtools to the left, and you'll see we have products now.

Okay, we have all these products. So what we need to do now is we need to basically have it so when we click this it dispatches another action that we have to write and then that action is basically going to say hey we clicked on navbar Python right? We clicked on python, so let's head over to our shop reducer, let's pass that ID into our action creator and then lets pass that as action .payload right.

Let's pass in Python ID 4, lets just pass in the id and then let's say okay let's take our state and let's override selected category id. So when you click on 4 Python right selected category id is going to say 4 and then what we can do is we can filter our product selected, we can throw that in there too and say hey we want all these products that contain 4 in belongs to okay.

Did we set any of those? Oh we only set one, and then product selected will have those products, then what we can do is we can filter it based on the ones we click okay, we can display only the ones that are in here. Okay so let's go ahead and let's commit our code and then hop into that in the next video because that's a lot of code.

Terminal

git status
git add .
git commit -m "fetch products action"

All right we'll see you in the next video.

Resources

Source code