Transform Observable RxJS into practical results

In a straightforward scenario, I have an upload action on the page that looks like this:

onUpload$: Subject<SomeUpload> = new Subject<SomeUpload>();
uploadAction$: Observable<Action> = this.onUpload$.map(entity => this.someActionService.upload(entity));

This uploadAction$ is subscribed to in an Angular2 component based on state.

this.subscription = Observable.merge(
  this.uploadAction$
).subscribe(this.store);

The action sends a base64 image to the server and receives a URL in response. This URL can be obtained like this:

someResponseUrl$: Observable<String> = this.store.let(getSomeUrlFromState());

I need to create a callback functionality as the URL is not used in templates, but rather for manipulating data in the code. Can someone provide guidance on how to create an action from this observable string to retrieve data and make a callback with it? Thank you in advance!

P.S. I've attempted something like this:

uploadAction$: Observable<Action> = this.onUpload$.map(entity => 
  this.someActionService.upload(entity))
    .do(() => {
      const subscription = 
        this.store.let(getSomeUrlFromState()).subscribe(url => {
        console.log(url)
      });
    });

It works, but I feel there might be a better solution...

Answer №1

To achieve your desired outcome and receive the expected results from the subscribers to this.someActionService, you can consider implementing the following logic:

uploadAction$: Observable<Action> = this.onUpload$
  .map(entity => this.someActionService.upload(entity))
  .mergeMap(() => this.store.let(getSomeUrlFromState()))
  .do(url => console.log(url));

Depending on your specific requirements, you may opt to utilize concatMap instead of mergeMap.

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

Constructor polymorphism in TypeScript allows for the creation of multiple constructor signatures

Consider this straightforward hierarchy of classes : class Vehicle {} class Car extends Vehicle { wheels: Number constructor(wheels: Number) { super() this.wheels = wheels } } I am looking to store a constructor type that ext ...

Encountering an issue while trying to integrate custom commands using the addCommand function in WebDriverIO

When using the addCommand function to add a new command, I encountered an error message that states: [ts] Property 'WaitForElementsAmount' does not exist on type 'Client<void>'. Here is an example of the code snippet I used: br ...

Zero's JSON Journey

When I make an HTTP request to a JSON server and store the value in a variable, using console.log() displays all the information from the JSON. However, when I try to use interpolation to display this information in the template, it throws the following er ...

Checking canActivate functionality in angular 2 using karma and jasmine: a guide

Looking to test the canActivate function in Angular 2 with TypeScript, Karma, and Jasmine. The code for the function is as follows: public canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { return t ...

Ensure that the hook component has completed updating before providing the value to the form

Lately, I've encountered an issue that's been bothering me. I'm trying to set up a simple panel for adding new articles or news to my app using Firebase. To achieve this, I created a custom hook to fetch the highest current article ID, which ...

Keep an eye on the output of Firebase database in Angular 2

Just starting out in angular, so please be patient :) Using Angular 2 (version 1.0.4), Angular CLI, and NodeJs 7.9. I've been trying to create a centralized service that checks if a user is logged in, retrieves their data, and sends it back for the ...

Updating the variable in Angular 6 does not cause the view to refresh

I am facing an issue with my array variable that contains objects. Here is an example of how it looks: [{name: 'Name 1', price: '10$'}, {name: 'Name 2', price: '20$'}, ...] In my view, I have a list of products bei ...

Enable the generation of scss.d.ts files with Next.js

I'm currently working on a project that requires the generation of .d.ts files for the scss it produces. Instead of manually creating these files, I have integrated css-modules-typescript-loader with Storybook to automate this process. However, I am ...

To initiate the development environment, execute the following command: `cross-env NODE_ENV=

[email protected] start /Users/ssurisettii/Documents/il-17g5-app cross-env NODE_ENV=development npm run webpack-development sh: cross-env: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ER ...

Utilizing a variable to pass props to a component (instead of a static component) within React Router 5

In react-router 5, you can pass props to a child component in this way: <Route path="/" exact render={ props => <MyPage title={myTitle} dataPath={myDataPath} {...props} />} /> However, I am using a route model in my ...

Error: The module '@angular/localize/init' could not be located within the specified directory '/usr/src/app/src'

After upgrading from Angular 8 to 9, I added the @angular/localize package. In my polyfill.ts file, I included the following import: import '@angular/localize/init'; When I compile and run my app locally in a browser, everything works fine. How ...

Looking to organize an array of objects containing two string elements (countries) based on the country name using TypeScript or the Lodash library?

Below is an example of an array of objects I am working with: { countries: [{ "country_alpha2_code": "PW", "country_name": "PALAU" },{ "country_alpha2_code": "US&qu ...

How can I effectively retrieve a value from Ionic storage and use it as an authorization token instead of receiving the promise "Bearer [object Promise]"?

In my Ionic 4 angular project, the storage.get('token').then() function returns a promise object instead of the refresh token. For JWT authentication, I send the access token as the bearer token in the authorization headers using an HTTP interce ...

What is the easiest way to compile a single .ts file in my src folder? I can achieve this by configuring the tsconfig.js file and running the yarn

{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, ...

Choose from the Angular enum options

I am working with an enum called LogLevel that looks like this: export enum LogLevel { DEBUG = 'DEBUG', INFO = 'INFO', WARNING = 'WARNING', ERROR = 'ERROR' } My goal is to create a dropdown select el ...

Having difficulty initializing a constant object in TypeScript

Encountering an error while attempting to compile my code using Angular 7.2.0 and TypeScript version 3.2.2: Error TS1005: ',' expected.**… The issue seems to be arising from the line where I am trying to define a const object. addAppareil( ...

What are the reasons behind the unforeseen outcomes when transferring cookie logic into a function?

While working on my express route for login, I decided to use jwt for authentication and moved the logic into a separate domain by placing it in a function and adjusting my code. However, I encountered an issue where the client side code was unable to read ...

How can Angular HttpClient be used to convert from Http: JSON.parse(JSON.stringify(data))._body?

When using the Http module, you can use this method: Http service: let apiUrl = this.apiUrl + 'login'; let headers = new Headers({'Content-Type': 'application/json'}); return this.http.post(apiUrl, JSON.stringify(model), {h ...

Exciting Dynamic Text Animation in React using styled components

I came across this cool jumping text effect on https://web.dev/patterns/animation/animated-words/ and wanted to incorporate it into my app. However, when I tried implementing the component in React, I encountered some issues. I created a styled component a ...

What are the counterparts of HasValue and .Value in TypeScript?

There is a method in my code: public cancelOperation(OperationId: string): Promise<void> { // some calls } I retrieve OperationId from another function: let operationId = GetOperationId() {} which returns a nullable OperationId, operat ...