To make sure that they load, again
we need to go back to the action creator and add a brand new action in the orders action creator, excuse
me.
One identifier I need is set orders, just as we had one for set products to set the loaded orders and
then here I have my fetch orders
action creator which takes no arguments but which then returns my async dispatch function here, thanks
to Redux Thunk and there ultimately I dispatch or I send a new action where the type is set orders and
where I have my loaded orders and of course, that should not be an empty array.
Instead we can borrow the logic from the products action creator, from fetch products there. We can take
all that logic, copy all of that here and move it over to the orders action creator and run that before
we dispatch,
here. Now of course we need to fine tune this, for example the request needs to be sent to orders/U1
and again that will be replaced later with a dynamic value,
for now it's hardcoded to fetch to orders for this user. It should be a get request, I want to check this,
that's fine.
Here I got my response data,
now here I got my loaded orders,
that seems to be a more appropriate name,
still I loop through all the data I got and I want to set my loaded orders down there
but now there's one important difference,
I don't create new products here which I add to loaded orders, instead
of course I need to create new orders here
and for that, you need to import order from the order model. Now
also I see there's a missing curly brace, now before I proceed with that by the way,
I need to make sure that I also catch any errors I might be getting and there I want to throw the error,
basically rethrow it,
make sure it reaches my component and I need one more a closing curly brace
but now back to our logic here where I create new orders, there
the ID is the key, just as for the products, the items can be found in my response data because we
basically get back this here right, so the response data will hold a card items key for example which
holds my card items which I need. So response data for the given key and there, .cardItems,
that's where I find my items because that's what we send here in the end to store the card items, then
my order which I create here of course also needs the total amount,
I get that from resData key and then there if we have a look at Firebase, it's that total amount field
here
and the date.
Well for that, I create a new date object but I initialize this with the resData key.date.
Now we need to create a new data object because resData key.date is just that date string here
and I need a date object, not a date string,
hence we wrap it, this string we wrap it with the date object creation here and therefore we get a data
object and
that's the order which I add here to loaded orders,
we do that for all the orders we're fetching and with that, we can dispatch this and now we just need to
handle it in the orders reducer.
So there, if I handle set orders and for that, you of course need to import this action identifier,
the only thing I need to do is I need to return a new state object where orders is equal to action.orders
and that's all we need to do,
so really simple.
Now why is it that simple?
Because in the action creator, we do all the work. There we map our orders and then here, I just have the
orders key on my action which holds all the mapped orders,
so that's just what I need to store here.
Now the remaining step is that we dispatch fetch orders here in our orders screen. So let's go there
and let's actually add use effect again to do that and to dispatch,
we also need to import use dispatch from React Redux
and then here we can get access to that dispatch function by executing use dispatch
and then here in use effect, we add dispatch as a dependency because in this effect function here, I
dispatch and now I need my order actions,
so let me import everything as orders actions from the store folder, from the actions folder, from the
orders file and with that imported here, we can say orders actions.fetchOrders
like that and then we'll go ahead and make that request and therefore now if we save this and we go to the
orders screen, it's initially empty but very very fast and it loads all the orders which we stored and that
are these three orders which I have here and of course, we can expand this just as before. Now a loading
spinner would be nice as well
and of course you can also pause the video here and try this on your own.
I'll quickly do it the same way as before - import use state from React,
then here set up the isLoading state and set isLoading by executing use state and setting this to
false initially and then here in the effect, in the end I want to use async await.
Now I said that you can't or shouldn't add async here, so we can either use then here simply or wrap this
in a helper function.
Now I will just use the then call, so I will set isLoading to true here and then add then here and once
this is done, I know we have a response, so here I will set isLoading to false.
Now please note that I'm not having error handling here,
so if this fails we're not handling this,
instead we'll always be in the loading state,
so of course you might want to consider adding error handling as well. I'll just not do it here because
I showed how it works, to not bloat this module too much,
I'll not implement it but I can
but of course you could handle errors here if you would want to use this then approach here by also
adding catch,
this is something you can absolutely do here.
I'll focus on the loading part
however. Now since I have all of that set up, we can import the activity indicator and import the view
component and for some styling,
also import the stylesheet API from React Native and then check whether we're in the loading state,
in which case I want to return my centered activity indicator here with a size of large and a color
which should be colors which you need to import, therefore primary, so make sure you have that colors import
added and with that added, here I'll add style equal to styles.centered or
however you want to name it and now add that styles object here with the help of Stylesheet.create
and there centered should have setup of flex one, justify content center and align items center, like
this. With that if we save it, we have a look at orders, we see the spinner. Again it's loading very fast
but you can see it if you look closely, here's the spinner for a fraction of a second and thereafter,
the orders are loaded. So that's now working, storing and fetching orders also works
and with that, we implemented HTTP requests and using a server for storing the data in this app.