Watching - transforming / combining

Question

Watching - transforming / combining

I am a beginner when it comes to working with Observables. Here's the Effect that I am using:

My goal is to dispatch the PositionUpdateAction or PositionFailedAction before the SunriseSunsetAction is dispatched.

Currently, what happens is that the result of getCurrentPosition() is passed into the last map in the result variable, and then the SunriseSunsetAction is dispatched. Neither the PositionUpdateAction nor PositionFailedAction are being dispatched.

I believe that I need to incorporate concat in some way. I've tried different approaches but haven't been successful.

I would really appreciate any guidance or assistance on this matter.

@Effect()
  position$: Observable<Action> = this.actions$.pipe(
    ofType(ActionType.GetPosition),
    mergeMap(() =>
      fromPromise(this.geo.getCurrentPosition()).pipe(
        map(value => new UiActions.PositionUpdateAction(value)),
        catchError((err) => {
          return of(new UiActions.PositionFailedAction(err));
        })
      ).map(result =>
        new UiActions.SunriseSunsetAction(this.sun.calculateSunriseSunsetWindows(result.payload.lat, result.payload.long))
      )
    )
  );

typescript observable ngrx ngrx-store ngrx-effects

Answer 1

Answer №1

I will provide a general solution to what I believe is the issue you are facing. The situation is typically where you have a task that produces a result, which you then want to use for another task. Ultimately, you want both results to be outputted.

In your specific case, the first task involves making a request and the second task involves mapping to another action.

The solution is to utilize *Map(...) (such as switchMap or mergeMap) to leverage the outcome of the first task for the second one. Instead of directly returning the observable from the second task, you can use concat to emit both outcomes in the desired order. Here is a generic example:

const { of, concat } = rxjs;
const { flatMap } = rxjs.operators;

of(1).pipe(
  flatMap((x) => concat(of(x), of(2)))
).subscribe((x) => { console.log(x); })

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.min.js"></script>

Therefore, your code may resemble something like this:

@Effect()
position$: Observable<Action> = this.actions$.pipe(
  ofType(ActionType.GetPosition),
  mergeMap(() =>
    fromPromise(this.geo.getCurrentPosition()).pipe(
      map(value => new UiActions.PositionUpdateAction(value)),
      flatMap((x) => concat(
        of(x),
        new UiActions.SunriseSunsetAction(this.sun.calculateSunriseSunsetWindows(result.payload.lat, result.payload.long))
      )),
      catchError((err) => {
        return of(new UiActions.PositionFailedAction(err));
      })
    )
  )
);

If you are using effects, another approach would be setting up another effect to listen for the PositionUpdateAction action. However, this could potentially create complex code...

Answer 2

I will provide a general solution to what I believe is the issue you are facing. The situation is typically where you have a task that produces a result, which you then want to use for another task. Ultimately, you want both results to be outputted.

In your specific case, the first task involves making a request and the second task involves mapping to another action.

The solution is to utilize *Map(...) (such as switchMap or mergeMap) to leverage the outcome of the first task for the second one. Instead of directly returning the observable from the second task, you can use concat to emit both outcomes in the desired order. Here is a generic example:

const { of, concat } = rxjs;
const { flatMap } = rxjs.operators;

of(1).pipe(
  flatMap((x) => concat(of(x), of(2)))
).subscribe((x) => { console.log(x); })

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.min.js"></script>

Therefore, your code may resemble something like this:

@Effect()
position$: Observable<Action> = this.actions$.pipe(
  ofType(ActionType.GetPosition),
  mergeMap(() =>
    fromPromise(this.geo.getCurrentPosition()).pipe(
      map(value => new UiActions.PositionUpdateAction(value)),
      flatMap((x) => concat(
        of(x),
        new UiActions.SunriseSunsetAction(this.sun.calculateSunriseSunsetWindows(result.payload.lat, result.payload.long))
      )),
      catchError((err) => {
        return of(new UiActions.PositionFailedAction(err));
      })
    )
  )
);

If you are using effects, another approach would be setting up another effect to listen for the PositionUpdateAction action. However, this could potentially create complex code...

Watching - transforming / combining

Answer №1

Similar questions

Creating autorest client based on various OpenAPI versions

Obtain a value that is not defined

Converting an array of objects to an array of JSON objects in TypeScript

What could be causing the module version discrepancy with the package.json file I created?

What is the best way to utilize the fresh Sanitizer API in Typescript?

Distribute among an array of specific types

The functionality of the String prototype is operational in web browsers, but it encounters issues

Eliminating an element from an object containing nested arrays

implementing a default reducer using ngrx schematics

I need to verify that the input type for time is valid, starting from today's date and extending beyond the current

Exclude weekends from DateTime

A guide on transforming a Firebase Snapshot child into a personalized object in a React Native environment

Issue with setInterval function execution within an Angular for loop

I am curious about the types of props for the methods within the 'components' object in react-markdown

Leverage es6 classes along with mongoose in typescript to utilize loadClass functionality

Encountered an issue loading resource: net::ERR_BLOCKED_BY_CLIENT while attempting to access NuxtJS API

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

Exploring the use of national flag emojis in VS code

Typescript: Extracting data from enum items using types

What could be causing my Angular 7 header to be unresponsive?