Tips and tricks for accessing the state tree within effects in @ngrx/effects 2.x

Question

Tips and tricks for accessing the state tree within effects in @ngrx/effects 2.x

I am currently in the process of migrating my code from version 1.x to 2.x of @ngrx/effects.

Previously, in version 1.x, I was able to access the state tree directly within an effect:

  constructor(private updates$: StateUpdates<AppState>) {}

  @Effect() bar$ = this.updates$
    .whenAction(Actions.FOO)
    .map(obj => obj.state.user.isCool)
    .distinctUntilChanged()
    .filter(x => x)
    .map(() => ({ type: Actions.BAR }));

However, with the upgrade to version 2.x, I have noticed that now only the action is provided. Is there still a way for me to obtain access to the state tree within the effect? Or should I consider avoiding this approach as it may not be best practice anymore?

  constructor(private actions$: Actions) {}

  @Effect() bar$ = this.actions$
    .ofType(ActionTypes.FOO)
    .map((obj: any) => {
      console.log(obj);              
      return obj.state.user.isCool   
    })
    .distinctUntilChanged()
    .filter(x => x)
    .map(() => ({ type: ActionTypes.BAR }));

angular typescript ngrx

Answer 1

Answer №1

To add to the options, you can also utilize .withLatestFrom(this.store) in your code. The modified code snippet would look like this:

  constructor(
    private actions$: Actions,
    private store: Store<AppState>
  ) {}

 @Effect() bar$ = this.actions$
    .ofType(ActionTypes.FOO)
    .withLatestFrom(this.store, (action, state) => state.user.isCool)
    .distinctUntilChanged()
    .filter(x => x)
    .map(() => ({ type: ActionTypes.BAR }));

Answer 2

To add to the options, you can also utilize .withLatestFrom(this.store) in your code. The modified code snippet would look like this:

  constructor(
    private actions$: Actions,
    private store: Store<AppState>
  ) {}

 @Effect() bar$ = this.actions$
    .ofType(ActionTypes.FOO)
    .withLatestFrom(this.store, (action, state) => state.user.isCool)
    .distinctUntilChanged()
    .filter(x => x)
    .map(() => ({ type: ActionTypes.BAR }));

Answer 3

Answer №2

Effects don't have to be defined as class properties; they can also be implemented as methods. This allows you to access a store that is injected into the constructor.

As of the time I wrote this response, there was some ambiguity regarding property declarations and usage of public/private constructor parameters. If properties are declared after the constructor, they can still access the public/private members initialized via constructor parameters - which means you do not necessarily need to declare effects as functions.

By utilizing the injected store, you can leverage operators like mergeMap to retrieve the state and merge it with the received update:

@Effect()
bar$(): Observable<Action> {

  return this.actions$
    .ofType(ActionTypes.FOO)
    .mergeMap((update) => this.store.first().map((state) => ({ state, update })))
    .map((both) => {
      // Perform necessary operations using both.update and both.state.
      return both.update;
    })
    .distinctUntilChanged()
    .filter(x => x)
    .map(() => ({ type: ActionTypes.BAR }));
  }
}

The decision of whether or not this approach aligns with best practices is subjective. Extracting state information - possibly through an ngrx-style selector - seems logical, but having all required data for an effect within its associated action would lead to cleaner code.

Answer 4

Effects don't have to be defined as class properties; they can also be implemented as methods. This allows you to access a store that is injected into the constructor.

As of the time I wrote this response, there was some ambiguity regarding property declarations and usage of public/private constructor parameters. If properties are declared after the constructor, they can still access the public/private members initialized via constructor parameters - which means you do not necessarily need to declare effects as functions.

By utilizing the injected store, you can leverage operators like mergeMap to retrieve the state and merge it with the received update:

@Effect()
bar$(): Observable<Action> {

  return this.actions$
    .ofType(ActionTypes.FOO)
    .mergeMap((update) => this.store.first().map((state) => ({ state, update })))
    .map((both) => {
      // Perform necessary operations using both.update and both.state.
      return both.update;
    })
    .distinctUntilChanged()
    .filter(x => x)
    .map(() => ({ type: ActionTypes.BAR }));
  }
}

The decision of whether or not this approach aligns with best practices is subjective. Extracting state information - possibly through an ngrx-style selector - seems logical, but having all required data for an effect within its associated action would lead to cleaner code.

Tips and tricks for accessing the state tree within effects in @ngrx/effects 2.x

Answer №1

Answer №2

Similar questions

Properly defining a DI service in Angular 2.1.2 using ES5

Adding typing to Firebase Functions handlers V2: A step-by-step guide

Error: Unable to iterate through posts due to a TypeError in next.js

Exploring the optimal procedures to asynchronously request an external API in Node.js using TypeScript

addImportToModule function results in a return of an empty changes array

Unable to modify data with ionic and firebase in child node format

Quicker component refreshing in the Angular framework

I'm having trouble importing sqlite3 and knex-js into my Electron React application

Angular SwitchMap is a powerful operator that allows you

The problem with Angular Jasmine Karma is with the [SortKey] and various elements present on the page

Guide on Implementing jQuery Plugin with Vue, Webpack, and Typescript

Contact creation not working on non-HubSpot form popups

Angular application hosted on Apache2 with SSL configured to communicate with a Spring Boot API running on port 8080

How to invoke a function from a different controller in Ionic 2

The functionality of data binding becomes unclear when the ngif directive is applied to a mat-selection-list in

The Angular array stays undefined when JSON data is being passed

Exploring the concept of data model inheritance in Angular 2

ESLint warning: Potentially risky assignment of an undetermined data type and hazardous invocation of an undetermined data type value

Support for BigInt is not available in TypeScript version 3.5.*

Using MUI-X autocomplete with TextField disables the ability to edit cells