Original subtitles

Now what we learned about funks

and funk action creators,

so these action creator functions here.

Now, did we learn about that,

let's build a app action creator that fetches the cart

when the application loads.

Because at the moment we're only sending data

but we never fetched data when the application load.

And therefore, if we reload, all our state is still lost

and that's of course not the goal.

Now we can ride that code in the component

or as action creator,

but here I now wanna stick to action creators

and hence we can add a second function cart slice.

But since this file is now getting bigger and bigger,

I'm a fan of creating a separate file for that.

Let's maybe name it cart-actions.js,

of course, the file name is up to you.

I'll then copy this sendCartData function,

cut it from cart-slice

and added it cart-actions

and now we need to import UI actions here.

So in cart-slice, I'll get rid of that import, cut that

and add that in cart-actions instead.

And in app.js, we therefore now need

to import sendCartsData

from store/cart-actions.

And then I'll add my app action creator function

in this cart-actions file as well.

So that could be the fetctCardData function

and I'll also export that

because we'll need it somewhere else as well.

And just as before that will immediately return a function

which gets dispatched as an argument

and then does something else.

Now here we could then also dispatch some notifications

if we want to do that,

but actually here I'll not do that.

Instead I'll create a new function, fetchData,

and have nested function which is async

because I'll use the fetch API

and I wanna wrap a fetchData with try catch it after

that's why I'm putting it into a separate function.

So then we await fetch action get a response here

and wanna fetch by sending a request

to that same URL again

but this time it should be a get request.

So we don't need to add this configuration object then

as a second parameter,

because I get request is the default, anyways.

Instead this time I am now interested in the data,

so in the result of calling await

response.Json

but of course, I also still wanna check

if the response is maybe not okay for whatever reason

and if that should be the case I'll throw a new error

where I say, "could not fetch cart data"

something like this.

Now, if we make it pass this line of code here though,

we have the data

and I will then return it here,

I'll return it here because

that is not a separate nested function.

Hence here I'll then try executing fetchData

and catch any errors we might be getting.

And if we get an error,

we still might wanna show the error in notification.

So I'll then dispatch this error notification action again

down here,

but I'll say, "fetching carts data failed."

If we however, are the try block or await fetchData,

I can do this

if I turned this into an async function, which we can,

Redux supports that,

that dysfunction which we returned here is async.

So we can use await here as well

and that gives me my cart data then

because I'm returning the data which we pass here

and there for now I wanna use that cart data to set my cart.

Now, the cart data we're fetching,

we'll have that format which is stored on Firebase

and that's the format which we're sending

to Firebase of course.

It will be this cart, which we're sending there

so it is an object with the items key,

with in an array inside and a total quantity key.

Which is exactly the format we need here

in our front-end as well.

Which is no surprise because we are sending

that Redux state snapshot

as data to the back and at the end.

So we automatically get back correctly formatted data here

and we don't need to transform that Firebase data first

because it has the format, we sent to Firebase earlier.

That's different from other sections in the course,

here we had to transform Firebase data

because there we used post for a sending our data

not put as we're doing here

and hence we let Firebase create a list of data

which turned out to be an object when we fetched it.

You might remember that from the HTTP section in the course

here with put we're sending our data snapshots to Firebase

and Firebase will take it as it is and store it like it is

without changing it.

So when we then fetch it, we also have to correct structure

and hence this cart data is correctly formatted

and therefore now, we can use this replace cart reducer,

which I provided to you earlier in this module

to replace our front-end cart

with the cart we're loading from Firebase

and replace cart expects a payload

which has a total quantity

and an items field which is exactly the data structure

we're fetching from Firebase.

So, in cart-actions, we just wanna import

our cart-actions

from the cart slice,

so these automatically generated actions now.

And here, I then wanna dispatch cart-actions replace,

not remove, replace cart

and pass my carts data as a payload,

which as mentioned has the correct structure already.

Now we could have done all to show to success notification

but I don't wanna do that, I just wanna use the cart data

and we're good to go.

With all that done, we now just need to call fetch cartData

somewhere in our application

to start fetching our cartData from Firebase.

And again, app.js is probably a good place for that.

Here we already have a user fact call

and that we wanna start fetching data here

if this application loads.

We could do that here in this isInitial check

because dad will only run if it's the first time

that this effect runs.

But I think it's cleaner to create a separate effect

which simply doesn't have any dependencies

and which therefore all they will only run

if this component was rendered for the first time

and since it's our main component

this will only render once.

And therefore here we can then dispatch

this new cart-action created, this custom cart-action.

So this fetchcartData action,

I wanna dispatch this here

and dispatch as a dependency for completeness sake

but as I said, that will never change,

so this effect will never rerun

and that will dispatch this whenever our application starts.

Hence if you saved this and reload you'll see

that this gets populated.

But you'll also notice that for some reason

we also see sent cart data successfully here

and we are sending a request to Firebase

for storing the cart data again.

So we're fetching it, as we can tell

we have our cart data here

and if I change it and reload,

we see we fetch that change to data,

but at the same time we seem to be sending it again.

And do you know why?

we are sending it again because in app.js

we have this effect for sending the cart data

which we'll execute whenever the carts changed.

The problem is when we fetched the carts data,

once fetching is done, we replaced a cart, right?

We replaced a cart

here with that fetched data,

that changes the cart inside of Redux.

Now, since that cart then changed

we triggered this app effect and send the cart data again.

So how can we now work around that?