Invoke the ngrx component store's Effect in a synchronous manner

In the ComponentStore of ngrx, we have two effects.

  readonly startAndUpdateProgress = this.effect<void>(
    (trigger$) => trigger$.pipe(
      exhaustMap(() =>
        this.numbersObservable.pipe(
          tapResponse({
            next: (progress) => this.updateIrisFileListProgress(progress),
            error: (error) => console.error(error)
          })
        )
      )
    )
  );

  readonly postFileToServer = this.effect((formData$: Observable<FormData>) => {
    return formData$.pipe(
      switchMap((formData) => {
        return this.schemaUploadSrvice.postFiles(formData).pipe(
        tapResponse(
          (response) => this.updateSchemaUploadServerResponse(),
          (error: HttpErrorResponse) => console.error(error),
        )
      )}),
      
    );
  });

Is there a way to wait for startAndUpdateProgress to complete before calling postFileToServer? I need to perform this synchronously.

Answer №1

Using the postFileToServer function is recommended within the startAndUpdateProgress effect for optimal performance.

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

Tips for maintaining the active state of a router link even when its parent route is activated

I have a navigation menu with 4 different sections: Home Categories HowItWorks About When the user selects "Categories," my URL changes to /categories/section1. In the section1 component, there are 2 buttons that lead to categories/section2 and categori ...

Asynchronously download static images with the power of NextJS and TypeScript integration

I have a query regarding my website development using NextJS and TypeScript. The site features a showcase gallery and is completely static. Currently, the initial view shows thumbnails of images. When clicking on a thumbnail, the original image is display ...

Challenges with SVG visibility on Opera browsers

In order to comply with design requirements, SVG is being used to create all the components of the interface in an HTML application, such as buttons, text, and icons. While most elements are immediately visible, menus are initially set to hidden. The issu ...

Save the text entered into an input field into a Python variable

Is there a way to retrieve the text from input fields that do not have a value attribute using Selenium? The issue is that these fields are populated automatically, possibly through JavaScript, upon page load and the text does not appear in the HTML source ...

What is the best way to transfer an id from JavaScript to Rails while utilizing ajax?

Is there a way to call a rail route and pass in an ID from javascript? I have recently started using rails routes within my application, even in js. The current code I am using is: # app/assets/javascript/verifying_link.js $.ajax({ url: "/verify_link/ ...

Triggering a re-render in React

There are times when I find myself needing to trigger a re-render while still in the middle of executing a function. As a solution, I've developed a method using the state variable my_force_update. Basically, I change it to a random value when I want ...

Switch button displaying stored data in sessionStorage

I am facing an issue with my small toggle button in AngularJS. I have set up sessionStorage to store a value (true or false), and upon page load, I retrieve this value from sessionStorage to display the toggle button accordingly. Depending on the value sto ...

Using Javascript, load a URL by making a JQuery ajax GET request and specifying custom headers

I currently have a small single-page application (SPA) using JQuery/Ajax for the frontend and Node/Express for the backend. The user authentication and authorization are handled with JSON-Webtoken, but I encountered an issue. If someone tries to access the ...

An in-depth guide on incorporating an Editor into a Reactjs project

Currently, I am working with Reactjs and using the Nextjs framework. My goal is to integrate the "Tinymce" editor into my project and retrieve the editor value inside a formsubmit function. How can I achieve this? Below is my current code: const editor = ...

Send the useState function as a prop

I've encountered a challenge while attempting to pass a useState function named setState to a custom component. Despite several attempts, I have been unsuccessful in achieving the desired outcome. This is how I am invoking my custom component: const ...

Issue Resolved: Received Error Message - Unable to Find Function $(...).datetimepicker in app.js Line 61

Resolved, but still facing an issue with changing the datetime format from MM-DD-YY to DD-MM-YY I've been troubleshooting my datepicker error without success. I've attempted to change it to DD-MM-YY hh:mm format, but it continues to default to M ...

What is causing this issue with the ajax call not functioning correctly?

$(document).ready(function(){ $('.clickthetext').click(function(){ $.post("submit.php", $("#formbox").serialize(), function(response) { $('#content').html(response); }); return false; }); ...

Incorporate a Font Awesome icon link within ReactJS for enhanced design and functionality

I am using Typescript and ReactJS to work on adding a link to font awesome icons. Below is a snippet of my code: import React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faRandom } from &apos ...

Upgrading from Angular 10 to 13 resulted in an error that required adding 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'. Although this fix was implemented, the issue still persists and the application remains broken

Here are a few examples of errors: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurred in the template of component ShochatactivestreamviewShellComponent. Error: src/app/money_makers/shochat_guts/shochat_content_creato ...

Substitute the temporary text with an actual value in JavaScript/j

Looking to customize my JSP website by duplicating HTML elements and changing their attributes to create a dynamic form. Here is the current JavaScript code snippet I have: function getTemplateHtml(templateType) { <%-- Get current number of element ...

Display information in a detailed table row using JSON formatting

I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table. Is there a way to achieve this? This is how I implemented it: HTML < ...

Developing Angular PWAs with a focus on microfrontends

I have set up multiple microfrontends using an "app-shell" type of application for the domain root, with each microfrontend on the first path element. Each app is constructed as a standalone angular application utilizing shared libraries to reuse common co ...

Dealing with the "expression has changed after it was checked" error in Angular 2, specifically when a component property relies on the current datetime

My component's styling is dependent on the current datetime. I have a function within my component that looks like this: private fontColor( dto : Dto ) : string { // date of execution for the dto let dtoDate : Date = new Date( dto.LastExecu ...

Setting up the Angular JS environment manually, without relying on an Integrated

I am a complete beginner when it comes to Angular JS. I recently inherited an Angular JS application that I need to run on a server without using any Integrated Development Environment (IDE). I have tried researching online for methods to run the applicat ...

Adjusting the empty image source in Vue.js that was generated dynamically

Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on ...