RxJs 自定義運算符無法訪問“this”

Question

我創建了一個訪問this的自定義運算符，但它似乎始終未定義，即使我使用bind傳遞給函數this

自定義運算符

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

自定義運算符用法

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

Answer 1

通常 rxjs 自定義運算符會妨礙

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

  ...some logic...

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

或者有論據

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

看到這個很棒的鏈接

Answer 2

將商店傳遞給shouldLoadNewOptimizationData 。 這樣您就可以避免每次使用該函數時都必須綁定this ：

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

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

Answer 3

更改為箭頭功能

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

Answer 4

如果你想要完整的角度 15（誰需要this ，裝飾器，ngmodules，構造器，......）

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

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

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