All language subtitles for 009 Using the Custom Store_en

So to use that custom store, let's go to the index, Jaspal, and get rid of the products provider,

which is our context API in action, can we get rid of that and instead import?

Configures story from.

Hooks Store Products store and called that here to set up our store.

Now the cool thing is we don't need to wrap this in a provider component or anything like that.

This will make sure that we initialize our store since we import in its store from the store fol these

things here will all be set up and they will be initialized with the values we're passing in our product

store.

Jaspal, if we had multiple stores, we would simply call Configures store for these different stores.

You would just have to give these functions different names.

You can, for example, named as Configure Products Store, of course, because it's the default export

you can name is whatever you want.

And you would call all these configure store functions for all the different store parts you might have

in your app.

And with that, the store is ready to use now to use it.

We can simply go to the place where we need it, like here, the products container file.

Instead of importing our context there, we can import use stores are custom hook from.

Hook store store now, so not from the product store, but just store and you store, it gives us access

to the global store and the global dispatch function.

So now here we can call use store.

Don't need to pass anything there.

And when we get back is our.

State and a dispatch function, that's what we get back from use store.

Now, of course, here I'm not interested in the dispatch function, so I can simply just get my state

here by just accessing the first element returned by the customs to work at a custom hook because the

custom returns to things local, state and dispatch the only need to state.

We just extract the first element from the array with this syntax, of course.

So that's our state.

And therefore here we can output state products because we know there will be a product's key in our

state because that's what we're setting up in the products store.

Jaspal, when we initialize our state, then here, the second argument we pass to in its store is our

object.

But we add a product that is.

What will be initialised, second argument, as our initial statehood will be merged with the global

state and therefore the global state will have a product's key, and that's what I'm accessing here

now to test this, let's go to the product item and get rid of our context thing there, because that

won't work right now.

Get rid of this and comment this out and save that.

And if you reload this page, you you should still see all your products there.

Now let's make the favorite button work again.

And for this in the product item file, instead of importing use context, we can import.

Use store.

From.

The Hooke's store folder and their disgorges file.

And then here, recall call use store, and now I'm only interested in the dispatch function, which

is our second argument, we'd return in our store here, we return to the rate dispatch is the second

argument or the second element, I should say.

So I'm extracting that second element here.

That's the dispatch function.

So I saw it in this dispatch constant, we can call dispatch here and now what I want to dispatch is

an actual identifier, which is toggle Faf and will then look for such an identifier in our actions

map, which I set up in products store there.

This is the actions map, which I use to initialize my store, which will be merged into the global

action map.

And there I have toggle Faf as an identifier and this needs a payload of product ID, which is good

to know because that's the second argument we can forward here.

Perhaps ID that should be all with that change.

Now we can mark things as a favorite again.

Now let's make sure the favorites page works again, because right now it's not working.

Of course, even though I have favorites, because it still tries to get them from the context.

So in the favorites, just fall here.

Let's not import the context anymore.

But again, import use store from.

The bookstore store folder and there it is, store Jaspal, and then here we got our state, which is

use store, and they're the first element and I'm interested in my favorite products, which I get by

accessing state products.

State products don't filter, and then I search for all products which are.

A favorite like this.

So, yeah, by the way, make sure you, of course, execute your custom hook that's important at parentheses

here, safeness and give it a try.

Got no products yet after the reload.

But now let's add two and we see them here.

So this is now working.

And I'm totally aware that this is kind of hard to wrap your head around it first.

So let me summed it up by briefly going through that again in the next lecture.