Differences between NgRx @Effect and createEffect

Can you explain the distinction between using createEffect versus the @Effect annotation in ngrx?

@Injectable()
export class ContactsEffects {

constructor(
    private actions$: Actions,
    private contactsService: ContactsService,
    private contactsSocket: ContactsSocketService
  ) {}


  destroy$ = createEffect( () => this.actions$.pipe(
    ofType(remove),
    pluck('id'),
    switchMap( id => this.contactsService.destroy(id).pipe(
      pluck('id'),
      map(id => removeSuccess({id}))
    ))
  ));

  @Effect()
  liveCreate$ = this.contactsSocket.liveCreated$.pipe(
    map(contact => createSuccess({contact}))
  );

}

Answer №1

When using @ngrx/effects, consider utilizing the createEffect function for enhanced type safety. Instead of relying on the @Effect() decorator, NgRx 8 offers the createEffect function which ensures type-safety by producing compile errors if the effect does not return an Observable<Action>. This eliminates the need to return an Observable<Action> for effects that do not dispatch new actions.

Starting from NgRx 8, effects automatically resubscribe in case of errors, providing a safety mechanism for potential oversights. However, this feature can be disabled by setting resubscribeOnError to false at the effect level as shown in the following example:

login$ = createEffect(() => .....), { resubscribeOnError: false });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn... Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images ...

Traversing an array in Javascript by iterating through its elements

So I have an array called var myImages = [];. After pushing items into it and using console.log(), I see the following: ["01_img"] ["02_img"] ["03_img"] ["04_img"] ["05_img"] When I click on something, I want to change the background of a div to display ...

AJAX: Send a value, perform a query based on this value, and retrieve a JSON array

Can anyone explain why this code isn't functioning properly? I am attempting to submit a value from a form to a PHP file that performs a select query in my database using that value. The goal is to return a JSON array to Ajax and display all the resul ...

Error in routing of submit button in Express.js

While attempting to create a basic "to-do list" using HTML requests, I encountered an issue with the PATCH request. Instead of redirecting to "/", it redirected to "/posts/2" and displayed the message "Cannot POST /posts/2", without updating the array elem ...

When utilizing ng-show to display a form, the value of $dirty is constantly false

I am facing an issue with displaying two forms conditionally. I am using ng-show for this purpose. However, I am also trying to implement validation using $dirty but it seems to always be false even when I input a value in the form field. Does anyone have ...

Creating artwork: How to resize images without losing clarity

Struggling to display an image in a canvas element that needs to be a certain percentage of its parent container's width. Despite my efforts, the image seems to blur once added to the canvas, which is not the desired effect. I attempted to disable th ...

Unable to find values for all parameters on the ContactEdit page

While exploring the functionality of local storage, I encountered an error when trying to inject it into my constructor: 'Can't resolve all parameters for ContactEdit page ?, [object Object], [object Object], [object Object], [object Object] ...

Tips for preventing line breaks within table cells

Looking at the image below, I need to display the Hallticket in a single line. The first one is retrieved directly from the database, while the second one is added dynamically using JavaScript. How can I show both sets of data in a single line? https://i. ...

Utilize the RRule library in JavaScript by incorporating the rrule.min.js script

I am having trouble integrating the library https://github.com/jakubroztocil/rrule into my website. Whenever I try to do so, I encounter the error: Uncaught SyntaxError: Unexpected token { I have attempted the following: <!DOCTYPE html> <html ...

Understanding how to accurately pair specific data points with their corresponding time intervals on a chart

I'm currently working with apexcharts and facing an issue with timestamps. I have data for sender and receiver, each having their own timestamps. The x-axis of the graph is based on these timestamps, but I am struggling to map the timestamp with its r ...

Issue in Jquery: Unable to load the corresponding pages when toggling the checkbox on and off

I am facing an issue with a checkbox and calling different php pages based on the status of the checkbox. Currently, the code works only for checked checkboxes. I'm not sure why it's not working for unchecked checkboxes as well. <script type ...

Exploring Angular 6 CLI Workspaces: A Guide to Creating Libraries for Exporting Services

Introduction: In Angular CLI 6, a significant feature called workspaces was introduced. A workspace has the ability to house multiple projects within it. All configurations for the workspace and its projects are stored in an 'angular.json' fi ...

Chrome Security Issue with Image Rendering in Three.js Canvas

Having trouble loading a canvas-generated image in Chrome (it works fine in Firefox). "Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at blob:*** could not be loaded. I've managed to make it wor ...

Adding a scss file to the library build using Angular CLI

I have been exploring different examples to develop reusable libraries. However, when I execute the command ng build library-name, the *.scss file is not present in the dist/library-name folder. How can I include style sheets in my build? Here are some h ...

Angular Image/Video Preview: Enhance Your Visual Content Display

Is there a way to preview both images and videos when uploading files in Angular? I have successfully implemented image preview but need help with video preview. Check out the stackblitz link below for reference: CLICK HERE CODE onSelectFile(ev ...

AngularJS: Refresh array following the addition of a new item

After saving an object, I am looking to update an array by replacing the conventional push method with a custom function. However, my attempts have not been successful so far. Are there any suggestions on how to rectify this issue? app.controller("produ ...

Selecting multiple rows using a datakey

Working on a project that utilizes the PrimeNg UI library has brought to light an issue with the datakey property in the table component. When examining the selection array, only one row is being selected even though the UI visually highlights all the rela ...

Encountering an error stating "cloudinary.uploader is undefined" while attempting to delete media files from Cloudinary

I'm currently developing a web application using express and node.js. In my project, I'm utilizing cloudinary for uploading media files. While uploading and accessing media works smoothly, I'm encountering an issue with deleting images from ...

Angular: monitoring changes in HTML content within a Component or Directive

I have a situation where I am retrieving HTML content from a REST endpoint using a directive and inserting it into a div element using [innerHTML]. Once this HTML content is rendered, I would like to manipulate it by calling a global function. My approach ...

Incorrect Tooltip DisplayWhat could be causing the issue with

I am facing an issue when trying to add a tooltip to a glyphicon within a tile. It doesn't seem to work correctly when it should. However, placing the tooltip outside of the tile works fine. I'm quite perplexed and would greatly appreciate any as ...