All language subtitles for 010 Custom Hook Store Summary_en

So what we built here in the end is our custom redacts like story implementation, we're having some

variables which are not global, not registered on the window object, but which do exist in this file

here.

And they only exist once in our application lifetime.

So they're shared in the entire application, every module.

So every other file which imports from the stored jazz file will use the same values which are stored

here.

Then in the same file, we create our own custom hook.

These variables are defined outside of the hook, though, and that's an important thing, because if

they were defined inside of the hook, then every component that used this hook would use its own values,

since they're to find outside of the hook every component that uses our custom hook uses the same values.

So now we're not just sharing the hook logic, but also some share data.

And sometimes you don't want this here.

We absolutely do want this because this allows us to globally manage some state, some actions and listeners

which are interested in state changes, which in turn are triggered by actions in our use store hook.

We're managing all of that.

We're having our dispatch function in there, which makes sure that whenever we call dispatch, we update

our global state and we call our listeners where our listeners are in and just said state calls where

we abuse in quotes because it's not really a hack.

But we're simply using that feature that when you call that state updating function use state gives

you any component that uses this hook will render.

That's what we want here.

We register one listener per component with the help of USA Fact, and we unregister it when that component

is destroyed.

And we then also have a way of initializing our store, which you can call multiple times because we're

not replacing our global state or replacing our actions.

Instead, we're always taking the current global state and the current actions to map to emerging new

data.

We're doing this so that you can create concrete store slices, just as we're doing it with redux,

with multiple reducers, where in one slice you manage your products, maybe in a narrow slice you managed

to use authentication status.

Of course, you have to make sure you avoid name clashes, but that's all.

So here I'm then setting up some actions.

For example, one action, of course, only here.

And then we call in its store to pass our actions here and our initial state for this slice of the global

state.

So that will be merged in our global state and in our global actions map.

And then from anywhere in our project, we can use that store and then ever tap into our state or use

the dispatch function to dispatch an action.

That's the idea here.

That's roughly kind of also the idea how Redox works behind the scenes.

But now we rebuilt it totally without redacts saving that extra dependency and using react and hooks

only.