How can the action value be passed in effects for switchMap using both another switchMap and filter?

Question

How can the action value be passed in effects for switchMap using both another switchMap and filter?

There is a certain code snippet

  @Effect()
  myEffect$ = this.actions$.pipe(
    ofType(MyActions.doSomething),
    tap(() => this.store.dispatch(MyActions.doSomething2())),
    switchMap(action => {

that is functioning as expected. In order to inject a filter just before the tap, I am looking for a solution that allows switchMap to retain the action value.

My attempt looks like this

  @Effect()
  myEffect$ = this.actions$.pipe(
    ofType(MyActions.doSomething),
    switchMap(() => this.store.pipe(select(mySelectors.getAmount), take(1))),
    filter(amount => amount <= 0),
    tap(() => this.store.dispatch(MyActions.doSomething2())),
    switchMap(action => {
    ....

However, it throws an error saying

property action.xxxx doesn't exist on type number

which is understandable. How can I avoid losing the action value returned by MyActions.doSomething?

angular typescript filter effects switchmap

Answer 1

Answer №1

To enhance the organization of the code and improve encapsulation, I suggest relocating the filter within the operator chain of the amount store. This adjustment ensures that the filter is only applied to specific values, eliminating the need to export the amounts outside of the switchMap. Instead, you can easily remap them to actions within the chain:

@Effect()
myEffect$ = this.actions$.pipe(
  ofType(MyActions.doSomething),
  switchMap(action => this.store.pipe(
    select(mySelectors.getAmount),
    take(1),
    filter(amount => amount <= 0), // apply filter here
    map(_ => action) // remap to actions
  )),
  tap(() => this.store.dispatch(MyActions.doSomething2())),
  switchMap(action => {
    // additional operations
  })

Answer 2

To enhance the organization of the code and improve encapsulation, I suggest relocating the filter within the operator chain of the amount store. This adjustment ensures that the filter is only applied to specific values, eliminating the need to export the amounts outside of the switchMap. Instead, you can easily remap them to actions within the chain:

@Effect()
myEffect$ = this.actions$.pipe(
  ofType(MyActions.doSomething),
  switchMap(action => this.store.pipe(
    select(mySelectors.getAmount),
    take(1),
    filter(amount => amount <= 0), // apply filter here
    map(_ => action) // remap to actions
  )),
  tap(() => this.store.dispatch(MyActions.doSomething2())),
  switchMap(action => {
    // additional operations
  })

How can the action value be passed in effects for switchMap using both another switchMap and filter?

Answer №1

Similar questions

implementing a default reducer using ngrx schematics

Guidelines for Managing Test Cases for a Promise-Returning Function with Resolve and Reject in Angular 6

Can TypeScript provide a method for verifying infinite levels of nested arrays within a type?

Deliver a securely authenticated single-page application on the root route through the use of a BFF, featuring a personalized login interface prior to employing Azure authentication

Extract the date and time information from the API response

Angular2 and Typescript paired with Visual Studio 2013

The server is taking too long to respond, resulting in a 504 Timeout error

Binding objects and properties from Angular2/Typescript to a template

Implementing generics in TypeScript for objects made easy with this guide!

Identifying Scroll Behavior in Ionic 4

Aligning two identical components within the same container when triggered by a single click

Launching Angular 4 front-end and .Net Web Api back-end simultaneously on the same IIS website results in a 404 error when refreshing the page

The specified type 'undefined' cannot be assigned to the type '"default" | "red" | "green" | "blue"

Ensure all promises are resolved inside of for loops before moving on to the next

Retrieve the runtime configuration object or file using Jest

What is the best way to ensure that two promises are both resolved before triggering a function from within a promise?

How can you load an HTML page in Puppeteer without any CSS, JS, fonts, or images?

"Exploring the world of Typescript's return statements and the

What is the process for inserting a new element into an Array-type Observable?

Building React Typescript Components with Froala Editor Plugins