All language subtitles for 007 Finishing the Store Hook_en

So now we're managing the listeners now we need to be able to change our state and for that we should

be able to kind of dispatch actions in our components.

So the same idea as if we were using redux heads here and use store.

I'll add a new constant.

I'll name it dispatch.

And this should actually be a function where I, let's say, get an action and then something should

happen when that action is triggered.

And actually here I just want to get the name or the identifier of that action because we define the

concrete actions in a different place.

This year is still the overall abstract definition of our store management system.

So here we get some actual identifier.

And keep in mind that we have does actions object up there?

My idea is that we can later define concrete usages of our store with their own actions, and they are

for such actions, will soon be registered here in this actions object.

Hence here.

Where we get action, I can reach out to actions for debt action identified because that should be a

key of that actions object later once it is registered.

And this action should actually be a function, so action should be an object where we have keys which

match my identifier here and where the value then is a concrete function, which is called by me adding

parentheses here.

The function which I call here, should get my global state, so my current global state and should

return me a new state, that's essentially also what happened in Redox.

Right, and a reduction to reduce or wienies and also got to action and the reduced burden.

Checked the action and returned a new state in the end, it's the same concept I'm following here.

I get to actually identifier, I search for that action in my actions object.

I expect that action is a function which I didn't execute.

So my reduce or function, so to say, which returns and use state.

That you will stay, the stand would emerge with my old state, so global state should then be essentially

my old copied global state merged with everything in the new state so that my global state is a new

object with the old data, plus the new data, the new state.

And now we just need to inform all listeners about that state update.

So I'll go through all my listeners.

So for concert listener of listeners using a four off loopier and listeners, of course, istat global

listeners every year.

And then keep in mind that what we add to listeners is just set state.

So it's a function.

So here I'll simply call a listener and pass my global state here.

So my new global state is what I pass to listener.

What this does is that it updates this state because that's where my listener comes from ultimately

with the new global state and hence react will rewriter the component that is using my custom hook here.

Now, I know we're still in a relatively abstract world, but this was an important first step.

We're now having an abstract dispatch function.

We're able to register listeners.

This is my custom hook.

Now it is custom hook should also return something.

And the something is an array with exactly two elements, and that's the global state and dispatch.

And if that looks familiar to you, then this is exactly what the built in use reducer functional returned.

It allows returns, a state and a dispatch function.

It's just not suited for managing state across components, which is why I have to build my own version

kind of.

But here I return to global state and dispatch.

Now, this is one thing I have here and I will export this constant hook, we need something else,

though.

This custom hook is nice, but it's still very generic, for example, right now, we got no way to

change these actions.

We can call them, but we can't set them.

So there is another thing I will export from from this fall besides to custom hook, and that's in it

store function, this function here.

Which I also export as a name to export will get some actions which are defined by us, the developer,

and maybe as an initial state, so that you can define this, too, because right now, global state

is always an empty state.

Maybe you have some initial state like we do.

Actually, we do have some products initially, for example.

And then here I will simply check if initial state, initial state should be on the initial state.

So if initial state is not null, in which case I'll set global state equal to an object where copy

to current global state, because keep in mind that you'll share Deadfall and you'll share that state.

So just like in redacts, you have multiple producers that make up one global store.

So therefore in redacts you had to call combined reducers to create one big Storrier state object.

It's the same what we're doing here I what we currently have in a global state with the initial state

of this concrete instantiation of this state, so to say, so that we could manage multiple things with

this global store.

So here, I'll merge in my initial state.

And said actions equal to Wilder current actions and then merge into user actions.

So now we have our global state, we have our user actions all registered here.

Now we need someplace where we can create a concrete products store based on this store setup.

That's the next thing I'll add.