Why is my ngrx action causing an endless loop?

I have one simple action in which I want to add some object into an array in my state. Somehow it runs into an endless loop. I couldn't figure out yet why it is happening. I am new to ngrx and Angular. What am I doing wrong? The action is fired after clicking on the button, which is calling following function onAddToCartButtonClicked() in shelf-item.component.ts

This is my reducer in reducer.ts:

export type ShoppinCartState = {
  CartIsOpen: boolean;
  Entries: ShoppingCartEntry[];
};


export function shoppingCartReducer(
  state: ShoppinCartState = { CartIsOpen: false, Entries: [] },
  action: ShoppingCartAction
) {
  switch (action.type) {
    case "CART_TOGGLE":
      return {
        ...state,
        CartIsOpen: !state.CartIsOpen
      };
    case "CART_CLOSE":
      return {
        ...state,
        CartIsOpen: false
      };
    case "CART_ADD_ENTRY":
      return {
        ...state,
        Entries: [...state.Entries.concat(action.payload)]
      };
    default:
      return state;
  }
}

This is basically my shelf-item-component.ts

export class ShelfItemComponent implements OnInit {
  @Input() product: Product;
  selectedOption: ProductVariant;
  isInputMissing: boolean = false;

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

  ngOnInit() {
    if (this.product && this.product.variations) {
      if (this.product.variations.length === 1) {
        this.selectedOption = this.product.variations[0];
      }
    }
  }

  onAddToCartButtonClicked() {
    if (this.isValid()) {
      this.addProductToCart();
    }
  }

  addProductToCart() {
    this.store.dispatch({ type: "SET_LOADING" });
    this.store
      .select(state => state.shoppingCartReducer.Entries)
      .subscribe(data => this.dispatchNewCartEntry(data));
  }

  dispatchNewCartEntry(entries: ShoppingCartEntry[]) {
    this.store.dispatch(
      new AddShoppingCartEntry(this.constructNewCartEntry(entries))
    );
    this.store.dispatch({ type: "UNSET_LOADING" });
  }

  constructNewCartEntry(entries: ShoppingCartEntry[]): ShoppingCartEntry {
    let matchingEntry = entries.find(
      entry =>
        entry.product.id === this.product.id &&
        entry.variation === this.selectedOption
    );
    let amount = matchingEntry ? matchingEntry.amount + 1 : 1;
    return {
      product: this.product,
      amount: amount,
      variation: this.selectedOption
    };
  }

  isValid(): boolean {
    if (this.isOptionToBeSelected()) {
      if (this.selectedOption) {
        this.isInputMissing = false;
        return true;
      } else {
        this.isInputMissing = true;
        return false;
      }
    }
    return true;
  }

  isOptionToBeSelected(): boolean {
    if (this.product && this.product.variations.length > 0) {
      return true;
    } else {
      return false;
    }
  }

  onOptionSelected(option: ProductVariant) {
    this.selectedOption = option;
    this.isInputMissing = false;
  }
}

Thats my shelf-item-component.html

<h3>{{ product.title }}</h3>
<img *ngIf="!product.image" src="../../../assets/img/esansBottles Kopie.png" />
<div
  [ngClass]="{ inValid: isInputMissing }"
  *ngIf="product.variations.length > 1"
>
  <form>
    <div class="variation" *ngFor="let variation of product.variations">
      <label>
        <input
          type="radio"
          name="variation"
          value="variation"
          (change)="onOptionSelected(variation)"
        />
        {{ variation.option }} {{ variation.price }} €</label
      >
    </div>
  </form>
</div>
<div *ngIf="product.variations.length === 1">
  <div *ngIf="selectedOption">
    {{ selectedOption.option }} {{ selectedOption.price }}€
  </div>
</div>
<div>
  <p>{{ product.description }}</p>
</div>
<div (click)="onAddToCartButtonClicked()" class="addToCartButton">
  In den Warenkorb
</div>

And this is the parent component shelf.component.html in which the problematic component is created:

<div class="container">
  <div *ngFor="let product of products | async">
    <app-shelf-item [product]="product"></app-shelf-item>
  </div>
</div>

And it's shelf.component.ts file:

export class ShelfComponent implements OnInit {
  @Input() products: Observable<Product[]>;

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

  ngOnInit() {}
}

I am really stuck and don't understand it :/

As Fateh mentioned, it will be triggered and the values will be subscribed. If this action is to be fired once upon subscribing to the store selector, you may chain the above statement the RxJS take() operator.

This operator will ensure that only the specified count values supplied to be take() operator will be emitted by the source observable.

import { take } from 'rxjs/operators';

this.store
  .pipe(
    select(state => state.shoppingCartReducer.Entries}),
    take(1),
  ).subscribe(data => {
    this.dispatchNewCartEntry(data);
  });

it's normal, You are subscribing to shopping cart entities here

this.store
  .select(state => state.shoppingCartReducer.Entries)
  .subscribe(data => this.dispatchNewCartEntry(data));

that means that each times shoppingcart entries change , dispatch will be triggered inside the subscription

I had a similar problem - completely my fault - the reducer and effects were in an infinite cycle. Spent hours debugging, only to find out that I had duplicated the action names in a copy-paste-cident (sickening >.<)