Commencing the invocation of actions from effects in NgRx

How can I trigger an action before or at the beginning of an effect in my code?

For instance:

saveSomething$ = createEffect(() =>
    this.actions$.pipe(
      ofType(SaveProjectAction),
      tap(() => ImSavingNowAction()), // Triggering action here
      withLatestFrom(this.store.select(selectSomething)),
      mergeMap(([action, project]) => {
        let save$ = this.api.call(something); // Performing a task that takes time


        return save$.pipe(
          map(
            (project) => SavedSomethingAction({ something }),// Next Action to be invoked
            catchError(() => EMPTY)
          )
        );
      })
    )
  );

Answer №1

It is advisable to directly handle the situation within the reducer once the initial action is dispatched, eliminating the need to dispatch the ImSavingNowAction from the effect.

Typically, in effects, it is best practice to manage one or multiple actions and consolidate them into a single action without triggering any other actions within the effect.

For more information, you can refer to the following rules: no-dispatch-in-effects and no-multiple-actions-in-effects.

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

Is it beneficial to utilize an interface for constructing a class model?

The Interface: export interface IAddEditGeneralDictionary { Code: string; StartDate?: Date | string; FinishDate?: Date | string; Name: string; } The Realization: export class AddEditGeneralDictionary implements IAddEditGe ...

Creating an array property in a Loopback 4 model

My user model has a property called addresses: @property.array(Address) addresses: Array<Address>; However, I am encountering an error: Cannot start the application. Error: "items" property must be present if "type" is an array ...

The specified Observable<Response> argument cannot be assigned to the parameter of type Observable<Response> at hand

Confused... React, Gulp private performAction(inputValue: Observable<Response>) { ... } ... triggerAction() { performAction(this.http.get(...)) } ...

The functionality of ngModel seems to be malfunctioning when used within select options that are generated inside

I'm currently working on dynamically adding options to an HTML select element within a for loop. I am using [(ngModel)] to get the selected option, but initially no option is pre-selected. Here's a snippet of the code: <table align="center"& ...

Creating a TypeScript definition file that exports a class after instantiation

Currently, I am struggling with a specific typescript definition that is not functioning as expected: mapping.ts class Mapping { // } var mapping = new Mapping(); export = mapping; This setup allows for the following usage: import _mapping = require(&ap ...

Connecting a pre-existing Angular 2 application to a Node.js server: A step-by-step guide

I am currently working on an Angular 2 application with the following structure : View Structure of my Angular app Furthermore, on the server side : View Structure of server app I have noticed that there are two module dependencies folders, but I am un ...

Definition file for mapbox-gl-draw in Typescript, also known as d.ts file

I attempted to define the mapbox-gl-draw project in a typed manner but unfortunately, I was unsuccessful. Can anyone provide some guidance on this? Here is how the javascript file looks: 'use strict'; var Setup = require('./src/setup&apos ...

When utilizing a standard Component in combination with resolveComponentFactory, the outcome will be Component<{}> rather than <T>

I've developed a dialog service that dynamically creates a DialogComponent with a child component. My goal is to make the DialogComponent a generic class of <T> so that I can type it for any child component I use. Currently, I am creating my Di ...

How can I send a string from an Angular 7 application to a .Net Core 2.0 API?

I'm having trouble passing a string from my Angular 7 service to the .NET API, as it always returns bad content. Does anyone have any suggestions for a solution? ANGULAR: searchAgentCode(agent_code:string): Observable<prsProducer[]>{ d ...

Generating an array of keys from duplicated values in Typescript

My data is structured in the following array format: { itemTitle: 'value example', itemType: 'value example', itemDescription: 'value example', itemFamily: 'Asset', }, { itemTitle: 'val ...

Enhancing Nativescript with the latest JavaScript updates

The NativeScript manual states that TypeScript (.ts) files are automatically compiled to JavaScript during project build. However, in my Angular + TypeScript mobile application, I have observed that the compilation of .ts files to .js files does not alw ...

Dealing with properties that are not found in Angular

Working on an existing code base, I am attempting to retrieve TextData from the mam-chart.model.ts file to populate a mat-form field in the design component. However, I am encountering an error that says "ERROR TypeError: Cannot read property 'text&ap ...

Directing non-www to www in Next.js has never been easier

Based on the information I've gathered, it seems that using www is more effective than not using it. I am interested in redirecting all non-www requests to www. I am considering adding this functionality either in the next.config.js file or, if that& ...

Tips for maintaining a connection in angular

I have a small demo app where I implement a fake login feature that serves its purpose well. However, I am looking to enhance it by persisting the logged-in user status. I have attempted to use the following method: The issue arises when I refresh (F5) th ...

Issue: The element type provided is invalid. Please make sure to use a string for built-in components or a class/function for composite components within the custom npm package

I'm currently developing a custom npm package (private) with a specific theme in order to utilize it across all of my projects. Within this package, I am integrating react-datepicker to create a tailored DatePicker component. Exporting and importing ...

Angular's table data display feature is unfortunately lacking

Below is a simple HTML code snippet: <div class="dialogs"> <div id="wrapper" > <p>{{createTestingConstant()}}</p> <ng-container *ngFor="let one of contacts"> <p>{{one ...

The HTTP post method is not consistently triggering

Currently, I am in the process of developing a logout feature for angular (with a spring backend). The logout action is triggered by sending an HTTP post request to /auth/logout, where the endpoint invalidates the auth-token and refresh-token HTTP-only coo ...

An error occurred during runtime while attempting to resolve all parameters for the UserService

I recently started using Ionic and I am trying to set up a sidebar with a user profile header, displaying the user's details as seen in other similar apps depending on who is logged in. Unfortunately, I have come across the following error: Runtime ...

Embarking on the journey of troubleshooting Angular/Node deployment challenges on Heroku

Attempting to set up a basic Angular/NodeJS application and deploy it via Heroku. As a newcomer to the Angular/Node environment, I am following an online course. Everything runs smoothly locally, but issues arise during deployment. Upon trying to launch i ...

"Implementing a jQuery plugin in Angular 7: A step-by-step

I recently began using a JavaScript plugin that utilizes jQuery to convert XML to JSON. You can find the plugin here. Initially, this plugin worked smoothly within my older AngularJs application. However, after upgrading to Angular7, I am facing challenge ...