Unable to access 'this' within a custom operator in RxJs

Question

Unable to access 'this' within a custom operator in RxJs

I developed a unique operator that utilizes the this keyword, but I am encountering an issue where it always returns undefined. Even though I used bind to pass this into the function.

My special operator

function shouldLoadNewOptimizationData() {
    return filter(function([p1,p2,p3]) {
       // some logic
       if(){
          this.store.dispatch()...
       }
    })
}

How to use my custom operator

effect = createEffect(()=> this.actions$.pipe(
    ofType(//action type),
    withLatestFrom(
        //...selectors
    ),
    shouldLoadNewOptimizationData().bind(this),
    // more operators..
    )
)

javascript angular typescript rxjs ngrx

Answer 1

Answer №1

Typically, a custom operator in rxjs is implemented like this:

function myCustomOperator<T>(source: Observable<T>) {

  ...implementation logic...

  return source; //or return source.pipe(....)
}

It can also take arguments like this:

function myCustomOperator<T>(...args) {
  return function<T>(source: Observable<T>): Observable<T> {
    ..implementation logic..
    return source //or return source.pipe(....)
  };
}

For more information on creating custom operators in rxjs, check out this informative link.

Answer 2

Typically, a custom operator in rxjs is implemented like this:

function myCustomOperator<T>(source: Observable<T>) {

  ...implementation logic...

  return source; //or return source.pipe(....)
}

It can also take arguments like this:

function myCustomOperator<T>(...args) {
  return function<T>(source: Observable<T>): Observable<T> {
    ..implementation logic..
    return source //or return source.pipe(....)
  };
}

For more information on creating custom operators in rxjs, check out this informative link.

Answer 3

Answer №2

Make sure to pass the store parameter to the shouldLoadNewOptimizationData function to eliminate the need for constantly binding this:

function shouldLoadNewOptimizationData(store) {
    return filter(function([p1,p2,p3]) {
       // some logic
       if(){
          store.dispatch()... // -> utilize the given store instead of `this.store`
       }
    })
}

effect = createEffect(()=> this.actions$.pipe(
    ofType(//action type),
    withLatestFrom(
        //...selectors
    ),
    shouldLoadNewOptimizationData(this.store),
    // more operators..
    
);

Answer 4

Make sure to pass the store parameter to the shouldLoadNewOptimizationData function to eliminate the need for constantly binding this:

function shouldLoadNewOptimizationData(store) {
    return filter(function([p1,p2,p3]) {
       // some logic
       if(){
          store.dispatch()... // -> utilize the given store instead of `this.store`
       }
    })
}

effect = createEffect(()=> this.actions$.pipe(
    ofType(//action type),
    withLatestFrom(
        //...selectors
    ),
    shouldLoadNewOptimizationData(this.store),
    // more operators..
    
);

Answer 5

Answer №3

Modify to arrow function syntax

const shouldLoadNewOptimizationData = () => {
    return filter(([param1,param2,param3]) => {
       // implement some logic here
       if(condition){
          this.store.dispatch()...
       }
    })
}

Answer 6

Modify to arrow function syntax

const shouldLoadNewOptimizationData = () => {
    return filter(([param1,param2,param3]) => {
       // implement some logic here
       if(condition){
          this.store.dispatch()...
       }
    })
}

Answer 7

Answer №4

If you're looking to fully embrace Angular 15 without relying on things like 'this', decorators, ngmodules, constructors, and more.

import { Store } from '@ngrx/store';
...

const shouldLoadNewOptimizationData = () => {
    const store = inject(Store)

    return filter(([p1,p2,p3]) => {
       // some logic
       if(){
          store.dispatch()...
       }
    })
}

Answer 8

If you're looking to fully embrace Angular 15 without relying on things like 'this', decorators, ngmodules, constructors, and more.

import { Store } from '@ngrx/store';
...

const shouldLoadNewOptimizationData = () => {
    const store = inject(Store)

    return filter(([p1,p2,p3]) => {
       // some logic
       if(){
          store.dispatch()...
       }
    })
}

Unable to access 'this' within a custom operator in RxJs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

It is not possible to assign a unique name to the custom attr() method

"There seems to be an issue with the KeyListener function in

Utilizing ng-repeat to display a collection of Angular Highcharts charts

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

Surge the PrimeNG DialogModule by integrating the CalendarModule to enhance its functionality

Encountering errors while attempting to share files in a system built with Node.js, Express,

Removing an item from an array in Mongoose

Updating a field in Mongoose by referencing an item from another field that is an array

`Must have content in file input in order to be saved to MongoDB`

Getting the received payload in Angular 4+

Is there a way to restrict the amount of user input that is allowed?

Can Express POST / GET handlers accommodate the use of jQuery?

Troubleshooting Problem with Padding in ion-content for Ionic Angular

Encountering a 404 error when using the NestJS GET function within the service and controller

How do I incorporate an external template in Mustache.js?

Methods used on a server and methods used on a client-side application

Is there a way to capture the input from the text box and store it in the local storage?

Troubleshooting Async Issues in Node.js

Trigger Vue method when the size of a div element changes

encasing a snippet of code within a customized hyperlink