All language subtitles for 003 Alternative_ Using the Context API_en

So let's start with approach number one, an approach that is sometimes the right choice, but not always,

and this approach will use the context API for this.

I'll add a new folder to this project and I'll name it context.

But you can, of course, name just whatever you want.

You can manage just wherever you want.

In this context folder, I'll create a new fall and I'll name it products dash context jazz.

Again, this name is also up to you and I'll import react from react.

And then in here we can create our, let's say products context or whatever you want to name it.

And I'll actually give us a capital P because we'll use that as a component, and then here we use react,

create context and we'll create our context, which should actually, let's say, manage the object

with a product's property in there, which holds an array of products.

And you could also argue that your entire context value is just an array.

But in case you had other fields, too, you would probably have an object here.

So we have our products here.

And my initial products here already, initial products.

I also have in their reducers file here.

So it's this array of products.

I'll just copy that, move that in their products context file and then simply, well, replace this

array with this copied array.

And with that, we're creating react context object here, there's one square brackets too much.

Now, this is the context object now here in this file, I want to export.

This context, but I also want to export a component as a default, which gets some props, of course,

and has to return some jazz.

So I'm just exporting a normal functional component here.

This is a functional component.

And there I use my products, context, thought provider component.

And again, check out my context, my react context lectures in this course, in case this doesn't tell

you anything, I cover it in the components deep dive section and I also have a look at it again in

the React Hooks section when we cover the U.S. context.

So here I provide my context and I want to provide it to everything that's passed between the opening

and closing tax of my export.

That component here with props children.

Now, important, though, the value of this context should be a value which I manage in this component.

So since that should be able to change, I'll use the use state Hoak, which is baked into react to

work with functional components only, though theoretically that could also be a Class-Based component

here.

That would be fine too.

And then here I want to manage my state here now.

My state I manage here in the end will be that array of products.

So actually.

I'll grab that array, remove it from the air, and here simply initialize an empty array to get better

order completion and I.T. support, but the value here doesn't matter because I will now manage to products

here in this state.

So that will now just be an array, not an object.

Just be an array of products.

Make sure the square brackets are correct.

And here we'll have our products and a set products function which we extract from you state.

And now here, the value I pass to my provider, to my product context provider is an object with the

products key because I want to have that in my context and that's just my personal preference here.

And the value for that product key will be my products list here and they'll actually name this products

list and name it here products list when we extract it so that we have no confusion regarding what's

what.

So here I manage an array of products with states named Products List and I assign this to my products

key here in that object I pass as a value to my products context provider.

So now whenever this value here changes, whenever we update the state here and there for this component

rebuilds, whenever that happens, our provider will get a new value and every child that listens to

our provider will be able to get that new value.

Now, with that prepared, we can use our provider here, an index chart where I previously provided

react redux, I'll not do that anymore and hence I can get rid of these two imports.

And instead here I want to import my products provider from context, context, products, context.

That's our default export there.

So we imported like this.

Get rid of all of that here.

We don't need that.

And then here have our products provider opening and closing, we don't need to pass anything, could

we just use it like this?

We can also get rid of the products, reduce our import.

You could also delete the entire store folder now if you wanted to.

I'll leave it here for reference.

So now I'm providing my contacts here and anywhere in this componentry.

So any child component here or in a child component of that component, I can kind of listen to that

context.

Now, one place where I'm interested in products is the products chestful fall in the containers folder,

for example.

There we can add an import statement to import something from our context folder, and they're from

products context and does something here is now not the provider component, but the products context

object itself, because we can use that together with use context and therefore we can also get rid

of that react redux import here.

We can use that here to get our products.

So here we can add the use, context, hook and point at products context to get access to that context.

And then yea I get my products context or I simply get my product list here, if you will, by accessing

this context here and there.

My products desk exists on my context after all, and this will be my list of products which is recreated

whenever we change something in that list.

So now we have that product list here and we can use that product list here to render the products will

not be able to mark them as favorites at the moment.

But this should work at least now to test this.

Let's go to components products, product item where I use dispatch and remove that import and remove

the usage of dispatch here so that we don't get an error about using some react redux feature without

providing a store.

If you do that, we save all the faults.

This page should be able to reload and render all our products.

Now again, favorite thing won't work for now, but we can use our context to distribute data to a different

component because we're now managing our products here in the products context, Jaspal, and we're

accessing our products in the container folder, in the products JS file.

Now let's also add a functionality to market product as a favorite.