You should take advantage of the improved NgRx APIs - Tim Deschryver <p dir="aut

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

You should take advantage of the improved NgRx APIs about timdeschryver.dev HOT 5 CLOSED

utterances-bot commented on May 23, 2024

You should take advantage of the improved NgRx APIs

from timdeschryver.dev.

Comments (5)

timdeschryver commented on May 23, 2024 1

@intigroll this is a TypeScript thingy, see ngrx/platform#3654 for more info

from timdeschryver.dev.

bttb commented on May 23, 2024

Thanks for your articles about ngrx. Unfortunately the createActionGroup does not work together with typescript naming rules. In your example

export const CustomerPageActions = createActionGroup({
    source: "Customers Page",
    events: {
      // Action without props
      'Customers Loaded': emptyProps(),
      // Action with props
      'Customer Detail Opened': props<{ customerId: string }>(),
    },
});

I will get this output from my linter:

   10:14  error  Variable name `CustomerPageActions` must match one of the following formats: camelCase, UPPER_CASE                        @typescript-eslint/naming-convention
   14:5  error  Object Literal Property name `Customers Loaded` must match one of the following formats: camelCase            @typescript-eslint/naming-convention
   16:5  error  Object Literal Property name `Customer Detail Opened` must match one of the following formats: camelCase            @typescript-eslint/naming-convention

The project compiles, but the linter is not happy.

from timdeschryver.dev.

timdeschryver commented on May 23, 2024

@bttb Yea, that's a known quirk.
As a workaround you can declare the events as "normal" properties:

export const CustomerPageActions = createActionGroup({
    source: "Customers Page",
    events: {
      // Action without props
      customersLoaded: emptyProps(),
      // Action with props
      customerDetailOpened: props<{ customerId: string }>(),
    },
});

from timdeschryver.dev.

intigroll commented on May 23, 2024

@timdeschryver thank you for this article. I struggle while I migrate to new NgRx. I get TypeError: undefined is not an object (evaluating 'this.store.select').

component looking like this:

  public subScriptionAndTarifSelecion$ = this.store.select(
    headNavigationFeature.selectHeadNavigationState,
  );

  public constructor(private readonly store: Store) { }

Everything is following this migration guide. Any suggestions?

from timdeschryver.dev.

intigroll commented on May 23, 2024

@timdeschryver never mind I found a solution.

  public subScriptionAndTarifSelecion$!: Observable<boolean>;

  public constructor(private readonly store: Store) {
    this.subScriptionAndTarifSelecion$ = this
      .store.select(headNavigationFeature.selectAboTarifSelection);
  }