The goal of the product overview screen of course is to present a list of all the products we can order
and therefore here, we'll of course have a normal React component,
so we need to import React from React.
We'll also need to import a bunch of things from React Native for sure,
for example I will need a flat list here because I will output a list of products, we don't know how
long that list will be but it potentially is very long, so we want to be able to optimize it for scrolling
and that is what the flat list does
out of the box and we can import more components as we need them.
So these are the two base imports,
now with that I'll create my products overview screen components here simply in this
function form here where we receive props and then we have to return some jsx here in the end
and in the end, I will also export my products overview screen here as the default of this file. Now
with that, the question of course is what's in there? What's inside of our component and in there,
I of course want to render my flat list,
I want to render my flat list of products.
Now of course, we have no products yet but we can add some. Just as before, I will therefore add a models
folder where I can define how a product should look like.
This is not a must do but it can help you organize your data and make sure that you never accidentally
work with different types of products, where you simply forgot to add a certain property in one place
of your app.
So therefore here in the products.js file in the models folder, I'll create a product class which has a
constructor where I define how a product should look like and I want every product to have a unique
ID, it should also have an owner ID which is the ID of the user who created it.
It should have a title, it should
have an imageUrl, it should have a description and it should have a price,
these are the things that make up a product for me in this application.
Now of course when we receive all these things as arguments in the constructor, I want to store them
in properties of this object which we can create with the help of this constructor,
so therefore I do this assignment which you also saw before
where I store all that data we receive in properties of the created object.
So here, we store the title, the imageUrl, the IDs and of course, description and the price. With that
set up here, we have a blueprint for a product and we will use then in Redux and we will then in the
end get such a list of products here in our products overview screen. Now to get it there, we need to
tap into Redux and for that to be possible, we need to set up Redux.
So let's go to the store folder now and in there, I want to have an actions subfolder and reducers subfolder,
in this app by the way we will have different reducers and actions,
unlike in the last module here.
So for the moment, we'll start with the products.js
file here in the reducers folder and I'll also add a products.js file in the actions folder.
Again if it's confusing to you that we have the same name here in different folders, you can always see
in which file I am here at the top here with this breadcrumb feature
and of course, you could also work with different names in your app if this is confusing,
I think it's pretty clear though in which file I am working, it's clearly selected here as well.
So let's start in the products reducer and in there I want to define my initial state because this
kind of defines how many products related state slice will look like
and of course, as always in programming there is more than one possible approach,
I think it makes sense to say that we have a list of available products, that's an array and of user
products and user products,
these are simply the products which we created,
so where the owner ID is the ID of the currently logged in user and for the moment, we'll have no
login feature but later that'll be the case, for the moment you will just set this up into a dummy
way. Available product should be all products or maybe also only the products which we didn't create
so that we can't buy our own products, though in reality in most shops, you can also buy what you sell,
so I think we can also just take all products here
but that's something you can also fine tune in your application.
So we have these two product arrays. Now in the reducer here which is a function where we get the state
which should be initialized with our initial state
and should take this as a default value and where we get an action, in there we will later handle
different action type so that we can for example add a new product and so on. For the moment I'll
just always return my state here and therefore
I will always return my initial state of course and that will allow us to then tap into Redux and at
least get that initial state.
Now of course without the possibility of adding new products, our initial state isn't that useful though
because it has empty lists of products here,
so nothing we could render.
So just as I did it before,
I'll also add a data folder and set up some dummy data in here which we'll not use throughout the entire module
but which we can use for now so that we have some products to get started with
and for this, you find attached this dummy-data.js file which you can just take to replace yours or
where you can just copy in the content into your dummy-data.js file
and what I do in there is I import my product model,
so of course therefore you should make sure that this path is correct for you if you just copied my
code and then I set up this product array here where I have a bunch of dummy products and
now it's important, we get the ID of the product, then we got the owner ID, then we got the title and
you should make sure that your product model is set up so that this order is correct.
So here we get the title, then we got the imageUrl as the fourth argument you receive, then
you have the description as the fifth and the price as the last argument,
so make sure that your product model is set up in the way that this is the order of arguments.
This is what you have here,
in the end I export this array as a default and
therefore now in this products reducer, we can simply import this.
So there we can import products, our list of dummy products from the data folder and there from
the dummy-data.js file and we can simply initialize our available products with products here for
the moment and the user products can also be initialized with that, though for the user products there
is one little difference which I want to make, I want to filter them for a certain owner ID because
in the end, not all products will be created by us. Instead here, I will filter that dummy array, look at
every product that only include products in my user products array where the owner ID is equal to
U1 which if you have a look at the dummy data is simply the case for some products, not for all
of them.
Some of them have the U1 owner ID and this will be the products I use here as user products, as
a dummy setup. with that our reducer for the products is set up here. we can ignore the products actions
for the moment, we'll of course add some later and now we can go to the app.js file and set up Redux
there as well.
For that, we need to import something from Redux
and of course, we also need to import something from React Redux.
Now this something we need to import from Redux here and
that is of course the create store function and the combined reducers functions,, so that
we can create one root reducer. At the moment of course we have only one reducer
but as I mentioned in this app, we will actually have multiple reducers in the end,
so here you definitely need to combine your reducers and from React Redux,
we need the provider component which we wrap around our app to provide something. We will then of
course also need to import the products reducer or however you want to name it from the store folder,
there from reducers and there from the products file so that we can thereafter create our root
reducer by calling combined reducers, where we then pass in an object where we map let's say to products
but that is up to you, our products reducer and later we will add more reducers there and then we
can create our store with create store and this in the end takes our root reducer as an argument
and thereafter down there in the jsx code, I will create my provider component in between the opening
and closing tags, I will then also later have my screen, for the moment, we'll not have anything there,
this is not valid jsx by the way but we'll fix it later and for the provider component, of course
we have to set the store prop and set this to the store constant or the store in general we're creating
here. With that, Redux should be set up, with that we'll later be able to tap into it here from the products
overview screen and with that of course, the next step also is to add navigation so we can see that
product overview screen. So let's continue working on these steps
next.