Create a Reusable Angular Effect

[00:00] Sometimes you'll want to have an effect that would run either the same way or a very similar way in multiple components or multiple services. And for this reason, you would like not to copy paste the code, but to create an reusable effect. So for this reason, let's provide a sync effect [00:20] which we haven't created yet, which is going to define what is the key that we want to synchronize with the local storage and what is actually the value that we want to provide. In our case, this is this items. But bear in mind that when we create it this way, we would [00:39] only get the value, the recent value, but only initially. So for this reason, we need to create a function that would be reevaluated anytime that any of the dependencies would change. Of course, this function could have multiple dependencies over here. So now let's create [00:59] the sync effect function, which is going to accept what is the key, which is a string, and the function over here, which is going to be a reactive read, but let's just call it value getter. So this [01:19] could be a function that actually reads the signal values. So this is going to return. Now we don't know what is going to return, so let's just provide a generic type t. And the function, what it's going to do is we would uncomment the code over here and move it [01:39] away. And that would be running an effect and actually not only running but also returning the effect. And here, instead of this reading this dot items, we would basically read what is the reactive getter. And this way, [01:59] the sync effect returns the effect ref just as a native effect ref and the synchronize effect Items effect is returning the effect ref. So if we need to do any cleanup, the reference is not lost.