Hold off until the RxJS dispatch is resolved

I am working on integrating a "next step" feature into my Angular 6 webapp. When the user clicks the "next step" button, the frontend triggers an action to update the database with the data in the store, another action to retrieve processed data from a Spring API, and finally, it progresses to the "next step".

My issue is that the inner dispatches are asynchronous, and the requests are processed in a random order, whereas they need to be in the correct order for the data to be accurate.

Below are my dispatches:

nextStep() {
    this.tseProjectStore.dispatch(
      new fromTSEProjectStore.UpdateProject(this.currentTSEProject, this.pathArchitecture, true, '')
    );
    this.tseProjectStore.dispatch(
      new fromTSEProjectStore.SetSolution(this.currentTSEProject, this.pathInitSolution)
    );
    this.router.navigate(['adjustments-step', this.currentTSEProject.id], {relativeTo: this.route.parent.parent});
  }

Is there a way to make the code wait for these dispatches to resolve before continuing execution?

angulartypescriptrxjs

Answer №1

To put it simply, it is not possible to wait for the dispatch. Rather, it merely sends an action to the store.

Here are some alternative approaches you can consider:

  1. Avoid using stores and opt for observables instead, which are waitable (using the await keyword).
  2. If transitioning to observables is not feasible, consider employing a signaling method. After the action is complete, a JavaScript event can be triggered.
  3. It seems like you require a comprehensive state encompassing all the data. Develop a more extensive state and update all aspects of the state simultaneously when dispatching the action.

You have the option to chain dispatch using ngrx effect: https://medium.com/@amcdnl/dispatching-multiple-actions-from-ngrx-effects-c1447ceb6b22

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

What are the distinctions between using findById({_id:historyId}) and findById(historyId) in Mongoose?

While working on one of my projects, I encountered a situation that left me a bit confused. I am trying to understand if both approaches outlined below will yield the same output, and if so, why? async getHistory( historyId: string) { const { h ...

node.jstypescriptexpressmongoose

Develop an Angular 6 application that utilizes an observable to monitor changes in a variable

I am working with Angular 6 and I need to monitor a variable for any changes and then stop or unsubscribe when the variable has a value. My initial thought was to use an Observable: myValue; // The variable that needs to be monitored myObservable = Obse ...

angulartypescriptrxjsangular6rxjs6

rxjs subscriptions in Angular

When setting up a subscription in Angular, I am declaring it as follows: counterSubscription: Subscription However, an error is being thrown stating: Property 'counterSubscription' has no initializer and is not definitely assigned in the const ...

angulartypescriptrxjssubscription

The presence of a method is triggering an Error TS2741 message stating that the property is missing in type

Here is a simplified code snippet that highlights the issue I am facing: class Test { prop1 : boolean prop2 : string method() { } static create(prop1 : boolean, prop2 : string) : Test { let item : Test = { prop1: prop1, prop2: pro ...

angulartypescriptangular8

Angular2 Cascading Dropdowns

When using Angular2, I am interested in creating a cascading select for the array object provided with values of xs and ys: data:Array<Object> = [ {"x":50, "ys":[ 10, 15, 20, 25, 30, 35]}, ...

angularcascadingdropdown

Converting numbers to strings based on locale in React Native

I have a quantity that, when using the amount.toFixed() function, produces the string "100.00". I would like this result to be formatted according to the specific locale. For example, in Italian the desired output is 100,00, while in English it should be ...

javascripttypescriptreact-nativelocale

When I attempt to add a todo item by clicking, the Url value is displayed as "undefined"

I am facing an issue with my household app where, upon clicking the button to navigate to the addtodo page, the URL specific to the user's house is getting lost. This results in the todolist being stored as undefined on Firebase instead of under the c ...

angulartypescriptfirebasegoogle-cloud-firestore

An error is triggered by the EyeDropper API stating that 'EyeDropper' has not been defined

I am trying to utilize EyeDropper for an eyedropper function in my project that uses Vue2 + Ts. Here is the code snippet: <div v-if="haveEyeDropper" @click="handleClickPick" > <i class="iconfont icon-xiguan"> ...

typescriptvue.jsgoogle-chromewindow

React, Typescript, and Material-UI 4 compilation dilemma

Out of the blue, my entire project collapsed and I can't seem to build it. I recently reset the project using a fresh create-react app build, which seemed fine initially. However, just yesterday, I encountered a similar issue but with a different erro ...

reactjstypescriptmaterial-ui

Creating Child Components in Vue Using Typescript

After using Vue for some time, I decided to transition to implementing Typescript. However, I've encountered an issue where accessing the child's methods through the parent's refs is causing problems. Parent Code: <template> <re ...

typescriptvue.jsvue-component

Utilizing ngModel to map object arrays in Angular 4 within template-driven forms

Currently, I am working on a template-driven application and wanted to share my project structure with you: parent parent.component.ts parent.component.html child child.component.ts child.component.html child.ts child.ts: export class child ...

angularangular2-templateangular2-formsangular4-forms

Maintaining the Continuity of an Observable Stream Post Error Emission

Have you ever wondered how to handle errors from an observable without ending the stream? For instance, when making HTTP calls and encountering a 404 error or another type of error, throwing an error in the stream will cause it to stop and trigger the err ...

angularobservablerxjs5

Adding an element within an ngFor iteration loop

I'm currently working on a code snippet that displays items in a list format: <ul> <li *ngFor="#item of items">{{item}}</li> </ul> These items are fetched from an API through an HTTP call. Here's the code snippet for tha ...

javascriptangularangular2-directives

The sequence of activities within the Primeng Multiselect component

Lately, I've encountered an issue while using the multiselect component from the primeng library in Angular. Everything was going smoothly until I noticed a strange problem with the order of events. Here is an example that showcases the issue: https:/ ...

angularprimeng

Vue is encountering difficulties resolving the index.vue file located in the parent directory

Having trouble importing a component from the path folder, I keep encountering an error message stating "Cannot find module './components/layout/Navbar'. Vetur(2307)". This is how I am attempting to import the component: import Navbar from "./c ...

typescriptvue.js

How can methods from another class be accessed in a TypeScript constructor?

I need to access a method from UserModel within the constructor of my UserLogic class. How can I achieve this? import { UserModel, ItUser } from '../../models/user.model'; export class UserLogic { public user: ItUser; constructor() { ...

typescriptdependency-injection

What is the best way to convert this tsc script into an npm script in package.json?

I am looking to execute the following script as an npm script: tsc src/*.tsc --outDir bin When I run this command directly in the terminal, it works as expected. However, when I add the exact same script to my package.json: { "scripts": { ...

node.jstypescriptpackage.jsontsconfignpm-scripts

The functionality of connect-flash in Express JS is compromised when used in conjunction with express-mysql-session

I am facing a unique issue in my project. I have identified the source of the problem but I am struggling to find a solution. My project utilizes various modules such as cookie-parser, express-mysql-session, express-session, connect-flash, passport and m ...

node.jstypescriptexpresssessionflash-message

Dynamically render a nested component, created within the parent component, using a directive

Can a nested component be dynamically rendered as a directive within the parent component? Instead of using the standard approach like this: <svg> <svg:g skick-back-drop-item /> </svg> where "skick-back-drop-item" is the s ...

angularangular-directiveangular-components

Creating a Union Type from a JavaScript Map in Typescript

I am struggling to create a union type based on the keys of a Map. Below is a simple example illustrating what I am attempting to achieve: const myMap = new Map ([ ['one', <IconOne/>], ['two', <IconTwo/>], ['three ...

javascriptreactjstypescript