All language subtitles for 004 Toggling Favorites with the Context API_en

To mark a product as a favorite on back in the context folder, in the products context last fall and

in there we manage our product list with use state right now in that same component, we can add a function

stored in a constant, maybe named toggle favorite.

It's a function.

So I'll use the arrow function here where I expect to get the product ID.

So the idea of the product for which I want to toggle the favorite status, the logic in here is pretty

similar to what I did in my producer before year.

I want to call set products list and I will use the function form of this hook to get my current product

list and return a new one based on that current one.

And I'm using that function form to be guaranteed that I'm working with the most recent state.

So here I want to return a new list.

That new list should be based on the old list, of course.

Now, again, for dad, we can simply grab the logic from our products producer here.

This logic here, solid copy all that logic, move it into the context folder, into this update function

here.

So in this nested arrow function and in here, states now simply state products now simply as the current

product list action product.

It doesn't exist, but we get the product here and everywhere.

I have state products.

I just use current prod list to get my product index, get the new favorite status, create an updated

products list based on the old list, and then swap the one item we're updating by copying all the properties

of the old item and replacing the favorite status.

And then here I return my updated products.

So now we have to toggle favorite method, which we can call to toggled of favorite status of a single

product.

Now, in my context, I'm trading up there besides the products in this object, and that's why I'm

creating an object, I'll not only have that list of products, I'll also have that toggle FEV function,

which here is an empty function.

And I'm just adding it here to this initial value so that we get better I.T. support and auto completion.

But I will also add toggle Faf to the object we're passing here as a value for products context provider

there.

I can now also add toggle faf and set does equal equal to toggle favorite.

Toggle favorite of course is that function we just created.

So now this function, a pointer at this function is also stored in our context value and now they are

for everywhere where we tap into our context, we can call this function and then dysfunction will change.

Something in Deadfall will change our state and Dhafer emit a new state, a new value to all components

that are listening.

So now let's go back to the product item, jass file into components folder.

And in there, let's now also import.

Products context from.

The context folder, of course, and they are from products context, get rid of that actually import,

which we don't need anymore, and with products context imported here, we can also import U.S. context

is hooked from react and then here simply get access to our products context or to the toggle thatthe.

Function by using U.S. context, products, context, dot toggle faf, and that's the pointer at this

function.

And now here in the toggle FAF handler, instead of dispatching this, I can just call toggle Faf and

forwarded now to get the best IDE completion, I'll go back to the product's context file and here dysthymia

function on the finding up here.

I'll actually add the ideas a parameter so that my idy knows that an ID should be passed here when I

call it.

And the idea when I pass here of course is proper ID.

So the idea of the item we're rendering here now, we should actually be able to mark something as a

favorite snuffly safe distance we go back.

Favorite Ding works again.

Now, let's also make your favorites page work again, because right now that is broken by going to

favorites Jestina Container's folder.

And there, let's get rid of the use selecter thing here instead.

Import the products context here from.

Context, products, context, that that file here and then here, our favorite products can be selected

with the help of the U.S. context.

Again, by using U.S. context here and by then.

Selecting products context.

DOT products, and then here we can call, filter and filter every four product by checking if it is

a favorite and only if Despard turns true, it will be included in the newly returned array, which

is stored in favorite products.

So now this page should work again.

Got no favorites initially, but now if I add, let's say these two favorites.

We see them here, so now we're managing our state with the context API and on first look, that looks

amazing.

We're not using Redux and it argued wasn't too hard.

We basically now have our story here in the context folder, in the product context to a file here.

And we're using react only features to pass that data around and to change it from anywhere and to read

it from anywhere.

Now, what's the downside of this approach?