Is there a way to switch on and off an ngrx action?

Question

Is there a way to switch on and off an ngrx action?

Here is a statement that triggers a load action to the store. The relevant effect will process the request and return the response items.

However, my goal is to be able to control this action with a button.

When I click on start, it should initiate dispatching actions every 1 second. If I click on pause, it should halt dispatching. When I click on start again, it should resume from where it stopped and continue in a loop...

How can I achieve this toggle functionality?

    let date = 1587513626000; // date is essential as the backend provides data with a start and end date
    interval(1000).pipe(tap(_ => {
      this.store.dispatch(loadStoreItems({ limit: 10, start: date, end: date + 1000 }))
      date += 1000
    }))
      .subscribe()

I have experimented with several operators, some of them work partially (such as utilizing takeWhile/takeUntil to pause at times) but I am struggling to restart the action.

javascript angular rxjs

Answer 1

Answer №1

To implement a toggle feature in an effect, you need to have two actions (start and stop) and utilize the takeUntil operator.

//effects.ts

  loadCourierItems$ = createEffect(() => 
    this.actions$.pipe(
      ofType(actions.start),
      exhaustMap(action => interval(1000).pipe(
        // logic for every second activity.
        map(actions.everySecondAction()),
      )),
      takeUntil(this.actions$.pipe(ofType(actions.stop))),
      repeat(),
    )
  )

//app.component.ts

  constructor(private store: Store<CourierItemsState>) {
  }

  ngOnInit() {
    this.store.dispatch(startAction());
  }

  ngOnDestroy() {
    this.store.dispatch(stopAction());
  }

Answer 2

To implement a toggle feature in an effect, you need to have two actions (start and stop) and utilize the takeUntil operator.

//effects.ts

  loadCourierItems$ = createEffect(() => 
    this.actions$.pipe(
      ofType(actions.start),
      exhaustMap(action => interval(1000).pipe(
        // logic for every second activity.
        map(actions.everySecondAction()),
      )),
      takeUntil(this.actions$.pipe(ofType(actions.stop))),
      repeat(),
    )
  )

//app.component.ts

  constructor(private store: Store<CourierItemsState>) {
  }

  ngOnInit() {
    this.store.dispatch(startAction());
  }

  ngOnDestroy() {
    this.store.dispatch(stopAction());
  }

Is there a way to switch on and off an ngrx action?

Answer №1

Similar questions

Issue with character encoding in jQuery-ui tabs

"Troubleshooting an issue with ng-model not functioning properly with radio buttons in Angular

Tips for sending information to a nested Angular 2 attribute component

What's the most effective method for identifying a pattern within a string of text?

Is there a compatibility issue between Nativescript and Angular Universal?

The addition operator cannot be used with the Number type and the value of 1

The Correct Approach for Implementing Error Handling in a Node.js API Server

Ways to access the scrollTop attribute during active user scrolling

Choosing a Component in a Collection with Angular 2

Update the content within a div based on the selected option from a dropdown menu or

Attempting to invoke a static function from a imported ES6 module

Can the MemoryRouter be successfully nested within the BrowserRouter in a React application?

Automate your workflow with Apps Script: Save time by appending a row and seamlessly including additional details to the

Removing a Dom element using stage.removeChild( )

Creating XML files using Node.js

Tips for obtaining accurate response from axios

Prevent JavaScript from sending a POST request to a specific URL

Monitor the change in values upon pressing the submit button on Angular

approach for extracting values from nested objects using specified key

Angular unit tests do not trigger the QueryList.changes.subscribe() listener