So storing is great, fetching would also be sweet and in the end, I want to make sure that when we
for example visit the products overview screen,
we simply reach out to the server and get all products from there, so that on this screen,
whenever we visit it,
we load the latest products.
Now for that, we need to send a HTTP request from there
and therefore in the end what I want to do is I want to dispatch a new Redux action which will reach
out to the server, get my products from there and then set the products in my store. So I need a brand
new action here, set products, which I didn't need before because we only worked with dummy products but
now that's not the case anymore, so set products should now be dispatched and I will need a new action
creator here which I'll name fetch products. For this I have no identifier because I will never dispatch
this as an action which should reach the reducer, instead
this will just be my action creator with the async code with the HTTP request.
It will not need any arguments but thanks to Redux Thunk, it returns a function which gets that dispatch
function as an argument and there in the end,
I want to dispatch an action object where the type is set products and where I want to forward my products
but of course that should not be an empty array but the products I get from my API. So we can therefore
kind of copy of this code here, including the async dispatch part here, all the way up to there where
we get the response data,
copy that from create product and replace this part here with it
and now what we do is we send a request to that same URL as before which makes sense because
that's where the products are stored.
However now I want to set a get request and that's actually the default when we use fetch,
so we don't need to set this. For a get request, you also don't need to set any headers and you can't set
a body,
so actually here, we can entirely get rid of this second argument on fetch,
we just send a fetch request like this.
Now the response will get back our data but now there is one important characteristic about the format
of that data and it's best if we simply see that.
So let me console log the response data here and comment this out for the moment or we can leave it in
there, it doesn't do any harm,
it doesn't do anything useful either,
we're not handling this in the reducer yet but let's log this and let's now go to the products overview
screen and make sure that there, we dispatch this fetch products action. Now thankfully, I already get
access to the Redux dispatch function there in products overview,
so now I just need to add use effect so that I can fire this whenever this component loads.
So here, I can add use effect and in my function here, I can call dispatch and now reach out to my product
actions which I therefore need to import as products
actions from store actions products, like this, that should be actions and now use the products
actions here to fire my fetch products action which in the end will make this HTTP request and this effect
should run whenever my component is loaded. So I can add an empty array and actually add my only dependency
which I have which is dispatch,
here that's the only dependency we define inside of our component, so that this will actually never rerun.
The only time it will run is when this component is loaded and that's exactly what should be the case,
whenever I will visit the screen,
I want to fire this effect here.
So if I now save this, let's save this and now as this loads,
you see here in the log, this is what happened here both on Android and iOS
which is why I see this twice.
This is what I got back in the end,
this object was returned by Firebase.
It's an object with all my products and I only have one which is why I only see one here and each object
is matched to its unique ID
but that's important.
We don't get back in array, we get back an object with unique IDs as keys and the values for these
keys is then my object data and we just need to know that for handling it correctly.
So back in our action,
this is how the response data looks like,
of course in my app I work with an array though, so I need to transform this.
So my loaded products or however you want to call this here should be an empty array
and now we can loop through that object to map the object data,
the products in the object to products in the array.
It's relatively straightforward to do, we can add a for/in loop here with our key where we go through
all the response data we fetched here in the end and then here, I add each product to my loaded products
with push, so that this array grows over time
and what I add here in the end is just a new product, using the product model which you therefore need
to import,
so make sure you have that import here pointing at your models folder and there at the product file
and I create a new product here
where my ID is that key because that is that unique ID here which we have in that object for
which we're looping, then that user thing, that is U1 still, dummy data because we have no user
data involved here and then we have to look into the object we got back from Firebase to get the title
and so on.
So here, our title for this new product we're creating is simply resData for the given key.title
and the same
of course here for the imageUrl, so .imageUrl. For the description
and of course also for the price, like that. So this adds everything to loaded products and now loaded
products will be a populated array which I can add here to the action that is dispatched, to the set
products action.
So the only missing thing is that we now go to the reducer and there, we can handle set products,
maybe here as the first case but of course the position doesn't matter. Add set products here
and for that, make sure you're importing it from your actions file and then there,
it's a very trivial thing which we're about to do. In the end I just need to return a new
state where the available products are equal to action.products, so to the products I derived here
in my action creator which I add to my dispatched action. And for the user product, it's pretty similar,
there it's action.products, just filtered for all the products that have my user ID, so like that
and at the moment due to my dummy code here where I hardcode my user ID, that of course means that
all loaded products are treated as my products.
This is something we'll change later once we added authentication. So with that,
now if this reloads, you see we start with the dummy data but then this is immediately replaced with
this loaded data. So loading data works just fine,
we can work with that as we could with our own data here.
Of course we're not storing orders on the server and anything like that but we are able to load our
data which we previously stored on the server.