What is the reason behind the triggering of actions by ngrx entity selectors?

I'm currently in the process of learning NgRx, but I'm struggling to comprehend why entity selectors would trigger actions. Despite my efforts to find an explanation, I have come up short. It's possible that I may be missing some fundamental concepts of NgRx/Entity.

Here is a snippet of my demonstration code:

selectors.ts

export const selectHeroState: MemoizedSelector<object, HeroesState> = createFeatureSelector<HeroesState>('heroes');
export const selectHeroes: (state: object) => Hero[] = heroAdapter.getSelectors(selectHeroState).selectAll;

component.ts

ngOnInit() {
 //this.store$.dispatch(new GetAll()); Initially, I believed this line of code was necessary to retrieve all data from the store... 
 this.heroes$ = this.store$.select(selectHeroes); //but it turns out that only this line triggers the Get All action
}

I hope I have articulated my question clearly. Thank you in advance for your assistance.

Answer №1

Actions are not triggered by selectors alone. There must be another component or function responsible for triggering the action.

As an illustration, in my ngOnInit method, I initiate the data loading process with this code:

this.store.dispatch(new productActions.Load());

This code snippet is what fetches the data. Subsequently, I can utilize the following code:

this.products$ = this.store.pipe(select(fromProduct.getProducts)) as Observable<Product[]>;

This line of code represents the selector used to retrieve the fetched data for display on the user interface.

To validate my assumption, I attempted to disable the dispatch method mentioned earlier, but it resulted in the failure to fetch any data.

Hence, my suspicion is that elsewhere within the application, there might already exist a mechanism for data retrieval.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message: "Incompatible types in Typescript"

As I delve into learning TypeScript, I have encountered two errors that are causing me some trouble. We have a problem with the following lines of code: Type 'string | null | undefined' is not assignable to type 'string | RegExp | QuerySelec ...

The issue arises when attempting to send requests from an Ionic 5 project on the iOS platform, as the session does not seem to be functioning properly. Strang

On the backend, I have set up a Java server and linked it to my ionic 5 project if(origin.contains("ionic")) { httpresponse.setHeader("Access-Control-Allow-Origin", "ionic://localhost"); } else { httpre ...

Which is better in Angular2: defining default property values in the constructor or inline?

When it comes to creating an object class in Angular 2, the common dilemma is whether to initialize values inline or within a constructor. But what exactly is the difference between the two approaches? export class Foo { id: string; name: string = &ap ...

Unidentified Angular NgRX action

After building my Angular application using NgRX, I integrated actions, reducers, services, and effects. However, when trying to access the action in the component code, I encountered the following error: Error: Property 'GetEmployees' does no ...

Leverage ng2-charts along with a loading component during the AfterViewInit lifecycle hook

Currently, I am working on a web page that contains various charts. My focus right now is on developing a simple loader as shown below: <div *ngIf="loading === true; else elseBlock" class="container"> <div class="grid-pulse la-3x"> </di ...

What is the best way to create a function that requires an argument in TypeScript?

I'm looking to bring in a module that requires an argument in Typescript. This is how it looks in javascript: const cors = require('cors')({origin: true}); // JS What would be the equivalent syntax in Typescript? ...

Exploring NextJS with Typescript to utilize the getStaticProps method

I'm currently enrolled in a NextJS course and I am interested in using Typescript. While browsing through a GitHub discussion forum, I came across an issue that I don't quite understand. The first function provided below seems to be throwing an e ...

crafting connections in 3D using TypeORM (ORM)

I attempted to construct a database schema involving users, groups, documents, and permissions. Users can be part of multiple groups Groups can have multiple users Users can possess permissions for documents Groups can have permissions for documents Perm ...

How can you connect a property to the output of a method in Vue.js when working with TypeScript and vue-property-decorator?

I'm working with a TypeScript single file vue component. I've encountered an issue where the template does not display the values returned by certain component methods. Here's a snippet of the template: <div class="order-items"> ...

Sort by label using the pipe operator in RxJS with Angular

I have a situation where I am using an observable in my HTML code with the async pipe. I want to sort the observable by the 'label' property, but I'm not sure how to correctly implement this sorting logic within the pipe. The labels can be e ...

Isolating a type as a constant in Typescript within a .js file?

Within my .js configuration files, I have a tsconfig containing the property checkJs: true. A library called Terser includes the following type options: ecma: 5 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020 Despite setting ecma: 2017 in my configuration file ...

Struggling with intricate generic type mapping of records in Typescript

Whew...spent an entire day on this. My brain is fried... I am developing a type-safe mapper function that determines which props are needed based on the mapping type and can predict the output types based on the ReturnType. However, it seems like each re ...

Using dots instead of lines for the carousel indicators in PrimeNG

I'm currently working on a carousel feature, but I want to change the indicators from lines to small dots. I know the solution lies within the CSS files, but I'm not sure how to implement it. I think I need to create a new CSS class, but I could ...

What is the process for extracting dates in JavaScript?

I need help extracting the proper date value from a long date string. Here is the initial date: Sun Aug 30 2020 00:00:00 GMT+0200 (Central European Summer Time) How can I parse this date to: 2020-08-30? Additionally, I have another scenario: Tue Aug 25 ...

Contrasting Compositions with Generics

Let's consider a scenario where we have an abstract class A and three concrete classes that inherit from it: A1, A2, and A3. There is also another hierarchy tree with an abstract class B and three concrete classes B1, B2, and B3. Each concrete class A ...

Warnings when compiling Angular with declarations of Angular Material components

Recently, I've been encountering numerous warnings during compilation after installing Angular Material. The warnings persist whether I install it directly from npm or through ng add @angular/material, regardless of whether I opt to use animations or ...

Only pass props to `Image` if they have a defined value

As I construct a blog platform using MDX and NextJS, I am creating a custom image component that utilizes the Next <Image> component. However, I've encountered a minor issue for which I have been unable to find a solution. The main question is: ...

Changing data types conditionally in Angular using TypeScript

My angular component relies on the API Response for its functionality. I receive these responses from an external API. When there are no errors Data : { Status: string; Data: number; } When an error occurs, this is what I get. Data : { Status: string; ...

React Typescript can easily differentiate between various prop types by selecting either of the two types

I am working with two Typescript interfaces: type ISecond = { timeType: string secondTime: number } type IDay = { timeType: string startTime: number endTime: number } When it comes to my react function props types, ... const CountDown ...

What is the best way to store items in localStorage within Angular version 4.4.6?

I have been working on implementing a basic authentication system in Angular 4.4 with MongoDB as the backend database. login.component.ts import { Component, OnInit } from '@angular/core'; import { AuthService } from 'app/services/auth.ser ...