Custom RxJS operator with parameters that accesses stream variables

Currently, I am facing a challenge in accessing the stream variable within a custom operator. The effect code snippet is structured like this:

@Effect()
v$ = this.actions$.pipe(
  ofType(ActionTypes.Action),
  map((action: ActionType) => action.payload),
  customOperator(
    new ActionCall(<I need to use the stream variable here>),
    ... // some other things not important in this context
  ),
);

The customOperator implementation is as follows:

export function customOperator<T>(<function parameters>): OperatorFunction<T, T> {
  return function (source$: Observable<T>): Observable<T> {
    ... // Although the stream variable is accessible at this point, it does not serve my purpose here
  };
}

I attempted to set the stream variable to a class variable within the tap operator, but unfortunately, it resulted in undefined. This dilemma has been quite perplexing for me.

Answer №1

It's not feasible to achieve what you're asking for. While customOperator can create a new stream, it cannot determine the values in the stream until after it is created. The values start flowing only after you subscribe.

Nevertheless, you can make customOperator provide you with the value as it receives it. Similar to map, filter, etc., you will need to pass a function to customOperator (along with any other necessary parameters). This function takes the stream value as an argument and returns whatever is required by your customOperator. Here's an example:

@Effect()
v$ = this.actions$.pipe(
  ofType(ActionTypes.Action),
  map((action: ActionType) => action.payload),
  customOperator(
    val => new ActionCall(val),
    ... // additional details not relevant in this scenario
  ),
);

export function customOperator<T>(func, <other function parameters>): MonoTypeOperatorFunction<T> {
  return function (source$: Observable<T>): Observable<T> {
    streamVariable = ... // the stream variable is accessible here b̶u̶t̶ ̶i̶t̶'̶s̶ ̶n̶o̶ ̶u̶s̶e̶ ̶t̶o̶ ̶m̶e̶
    const actionCall = func(streamVariable);
    // Utilize actionCall according to your requirements.
  };
}

You have now utilized the stream variable to instantiate a new ActionCall, which is the closest you can get with RxJS.

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

The best practices for utilizing ES6 Modules syntax in TypeScript files within a NextJS environment

The issue appears to be trapped in a loop: package.json is missing type: "module". This results in an error when trying to use modules in TypeScript files: An error occurred while running the seed command: /Users/me/code/me/prisma-learning/grap ...

The lazy loading feature is not functioning properly even though it has been set

I have implemented lazy loading in my Angular 10 application, but I am encountering an issue where the page remains blank. Despite adding a console.log statement in the ngOnit of the child component, it does not seem to fire. Can someone help me identify w ...

Trouble retrieving data from cross-domain JSON request in AngularJS

Struggling all day to retrieve the JSON data from this specific URL: As a beginner in cross-domain calls, I attempted using JSONP and $get.JSON methods without any luck. My main goal is to extract the information from that URL link and store it in an Angu ...

Guide on hosting an ASP.NET Core 6 application with Angular 12 on an IIS Server

Utilizing the publish feature within Visual Studio, I successfully published my project to a designated folder. Subsequently, I created a Website on IIS for my web server and linked it to the directory where all the generated files are stored. The content ...

Guide on determining the return type using the properties of the object parameter with a generic type

My goal is to return a promise if the user selects true for async. In TypeScript, it appears that the type will always be taken from the Create interface. How can I create a type that will be used to specify the return type? interface Create<T> { ...

Create a single declaration in which you can assign values to multiple const variables

As a newcomer to react/JS, I have a question that may seem basic: I need multiple variables that are determined by a system variable. These variables should remain constant for each instance. Currently, my approach is functional but it feels incorrect to ...

Angular Kendo UI File Uploader

I faced a challenge with the Kendo Ui Angular's kendo-upload component. I needed to provide [saveUrl] and [removeUrl] in the kendo-upload, but since I split the project into service and component parts, I opted to handle the Upload logic myself within ...

Troubleshooting Vue and Typescript: Understanding why my computed property is not refreshing the view

I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial pri ...

Angular4 - Implementing a Masterpage with Parent-child components for Header, Content, and Footer structures

When clicking on a link in the header component, the corresponding data should be displayed in the app-Content component. However, currently the data is only displaying in the header component and not in the content component. The goal is to create a Mast ...

Achieving Jest integration with Angular 9 in a Storybook setup

We are currently utilizing Storybook 5 alongside Angular 9, with Jest 26 for some of the testing procedures. The issue we're facing arises when using Typescript version below 3.8.0 - a requirement for Angular 9's ng build --prod. This results in ...

A guide to representing a TypeScript interface as a UML model

As I work on designing a class diagram for an Angular application, I come across the need to understand how TypeScript is utilized in such projects. It's worth noting that Angular apps are primarily written in TypeScript. Within TypeScript, one inter ...

Using an alias component in Angular 2 refers to a method of referencing components with

I've encountered a snag with Ionic 2. I'm trying to navigate to a new view by obtaining a reference/alias to the component page. In my parent class (SettingsPage), this is how I attempt to push a new page : <ion-item [navPush]="addon.setting ...

Angular 5 disrupts the responsiveness of Bootstrap cards during the build process

My issue involves multiple bootstrap cards. In my Angular 5 development environment, the cards display correctly. They are arranged in rows of 8 cards each, and when the screen is resized, the card size adjusts accordingly, eventually switching to 4 cards ...

Using dual ngFor in Angular 4: A step-by-step guide

I am encountering an issue in my Angular 4 project where I receive two different arrays in response to a server request, and I want to utilize both of them in the template. Here is my controller code: this.contractService.getOwnerContract() .subscribe( ...

What steps can I take to ensure the footer remains fixed at the bottom of the webpage?

I am facing a challenge with my footer component as it is currently being displayed at the end of another component. I want to ensure that it remains anchored at the bottom of the page regardless of the other components present. In addition to the footer ...

Instruction Leads to Input Losing Focus

I have developed a custom directive for allowing only numbers in an input field: @Directive({ selector: 'input[numbersOnly]' }) export class NumbersOnlyDirective { constructor(private ref: ElementRef, private control: NgControl) { } @Hos ...

Is it possible to create my TypeORM entities in TypeScript even though my application is written in JavaScript?

While I find it easier to write typeorm entities in TypeScript format, my entire application is written in JavaScript. Even though both languages compile the same way, I'm wondering if this mixed approach could potentially lead to any issues. Thank yo ...

Angular's asynchronous HTTP request allows for non-blocking operations when

I'm currently working with Angular 6, and I've encountered an issue while updating my resource instance in the following way: this.user = api.getUser(); public getUser(): User { const myHeader = new HttpHeaders({ 'Authorization' ...

Tips on troubleshooting the issue when attempting to use a hook in your code

I am trying to implement a hook to manage the states and event functions of my menus. However, when I try to import the click function in this component, I encounter the following error: "No overload matches this call. The first of two overloads, '(p ...

TS1057: It is required that an async function or method has a return type that can be awaited

There was a recent Github issue reported on March 28th regarding async arrow functions generating faulty code when targeting ES5, resulting in the error message: TS1057: An async function or method must have a valid awaitable return type You can find t ...