Create a Reusable Angular Effect

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 6 months ago
Updated a week ago

You may find that you need to implement similar effects across multiple components or services. To avoid code duplication, you can create reusable effect functions.

A reusable effect function should:

  1. Accept any necessary configuration parameters (e.g., a key for local storage synchronization).
  2. Accept a function that retrieves the reactive value(s) to track (e.g., a signal getter).
  3. Set up and return the effect, using the provided configuration and reactive value getter.

[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.

egghead
egghead
~ 8 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today