Stopping Duplicate Actions in Redux with Angular

Question

Stopping Duplicate Actions in Redux with Angular

I find Redux to be a very impressive library, and I am quite fond of it. However, I am facing an issue where actions are being called twice. What are some common mistakes that could be causing this behavior? Please note that I have already unsubscribed the subscription in the controller.

constructor(private _store: Store<AppState>) {
    this.subscription = this._store.select('reduxObj').subscribe(function (item) {
      switch (item.type) {
        case fromAction.GETITEMS: {
          break;
        }
      }
    }.bind(this));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }


  ngOnInit() {
    this._store.dispatch(new fromAction.GetListAction());
  }



    //REDUCER
    export function ReduxReducer(state: any = undefined, action: fromAction.actions) {

  switch (action.type) {
    case fromAction.GETITEMS: {
      return { ...state, type: fromAction.GETITEMS }
    }
  }


  //ACTION
  export class GetListAction implements Action {
    readonly type = GETITEMS;
    constructor() { }
  }

angular typescript redux

Answer 1

Answer №1

It's interesting how people tend to focus on insignificant details.

Let me give you a direct answer to your question:

In a basic scenario, a select function on a store is designed to listen to dispatch events.

If you call dispatch twice, your subscription will be triggered twice as well.

Unless there are additional effects involved, the behavior remains simple and straightforward.

The reason for the double invocation is usually linked to the default value set when instantiating the store.

(state: MyState, action: MyAction implements Action) => any

In most cases, it is structured like this:

myReducer(state: MyState = undefined, action: MyAction implements Action) { ... }

This setup implies that the initial state is undefined, and triggering dispatch changes it to a defined state.

Hence, the repeated calls.

On a side note, relocating this logic to the constructor won't alter the outcome.

EDIT

To avoid processing the initial value, consider using either filter or skip (choose based on your requirement):

this.subscription = this._store.select('reduxObj').pipe(
  // For an array, skip empty arrays
  filter(value => value.length),
  // For `undefined`, skip falsy values
  filter(value => !!value),
  // Skip the first emitted value
  skip(1),
)

Answer 2

It's interesting how people tend to focus on insignificant details.

Let me give you a direct answer to your question:

In a basic scenario, a select function on a store is designed to listen to dispatch events.

If you call dispatch twice, your subscription will be triggered twice as well.

Unless there are additional effects involved, the behavior remains simple and straightforward.

The reason for the double invocation is usually linked to the default value set when instantiating the store.

(state: MyState, action: MyAction implements Action) => any

In most cases, it is structured like this:

myReducer(state: MyState = undefined, action: MyAction implements Action) { ... }

This setup implies that the initial state is undefined, and triggering dispatch changes it to a defined state.

Hence, the repeated calls.

On a side note, relocating this logic to the constructor won't alter the outcome.

EDIT

To avoid processing the initial value, consider using either filter or skip (choose based on your requirement):

this.subscription = this._store.select('reduxObj').pipe(
  // For an array, skip empty arrays
  filter(value => value.length),
  // For `undefined`, skip falsy values
  filter(value => !!value),
  // Skip the first emitted value
  skip(1),
)

Answer 3

Answer №2

First and foremost, there is no need to use .bind(this) in observer functions. Additionally, you can make use of ES6 arrow functions instead of traditional JavaScript functions as callbacks (() => {}).

Regarding your query, the optimal approach to retrieving only a single value from an Observable is by including the take() method in the RxJS pipeline, like so:

         this.subscription = this._store.select('reduxObj')
           .pipe(take(1))
           .subscribe((item) => {
              switch (item.type) {    
                case fromAction.GETITEMS:{                                                                                                        
                  //...                                    
                  break;
                }
              }
        });

In order to implement this, you need to import take from 'rxjs/operators' if you are using RxJS version 5.5 or above.

import { take } from 'rxjs/operators';

Answer 4

First and foremost, there is no need to use .bind(this) in observer functions. Additionally, you can make use of ES6 arrow functions instead of traditional JavaScript functions as callbacks (() => {}).

Regarding your query, the optimal approach to retrieving only a single value from an Observable is by including the take() method in the RxJS pipeline, like so:

         this.subscription = this._store.select('reduxObj')
           .pipe(take(1))
           .subscribe((item) => {
              switch (item.type) {    
                case fromAction.GETITEMS:{                                                                                                        
                  //...                                    
                  break;
                }
              }
        });

In order to implement this, you need to import take from 'rxjs/operators' if you are using RxJS version 5.5 or above.

import { take } from 'rxjs/operators';

Stopping Duplicate Actions in Redux with Angular

Answer №1

EDIT

Answer №2

Similar questions

I am puzzled as to why I am receiving the error messages stating that [ngForm] is not recognized as a valid property for the form element, and that [ngClass] is not a recognized

What are the possibilities for adjusting the tooltip position in ng2-chart?

Using Vue.js - error occurs when trying to push an object using the push method

Finding the data type of a collection of functions stored in an associative array

Exploring Real-Time Typescript Validation in Next.JS

Struggling to understand how to implement Schema Directives after transitioning to Typescript

Is there a way to transfer the node_module folder to a different drive using npm without duplicating the API multiple times?

utilizing type predictors in brand merging

Encountering an Uncaught ReferenceError in Angular 8 and Webpack 4: Issue with vendor_lib not being defined plus source map error

Blocks visible when tabs are switched

Angular Universal's SSR causing a double page load event

Troubleshooting problem with Angular 2 integration in asp.net core involving controller and action names resulting in main.js file not being located

The variable in my NodeJS code is persisting across multiple requests and not being reset as expected

The bar graph dataset is not correctly configured when utilizing ng2 charts and ng5-slider within an Angular framework

One particular module is causing disruption to the hot module replacement functionality across my entire application

The functionality of `import { Dialogs } from "@nativescript/core"; seems to be malfunctioning

ES5 approach to Angular2 HTTP Providers (not TypeScript)

Is it compatible to use Typescript version 2.4.2 with Ionic version 3.8.0?

Error encountered in Angular while using CKEditor: Trying to read the property 'type' of a null value results in a TypeError after inserting text

Obtain the Angular 2 Form object within a TypeScript class file for manual configuration of form properties