Angular - Utilizing NgRx selector for efficient data update notifications

Is there a method to create a "data updated" indicator when I am not interested in the actual updated data itself? Consider a scenario with a reducer:

const initialState: SomeReducer = {
  dataInQuestion: Array<SomeDto>,
  ...
}

Following an action -> effect -> action -> reducer chain will modify dataInQuestion, and I want to be alerted about this without needing the new data. The solution I devised may seem questionable at first glance and goes against the pure function principle.

const selectDataInQuestion => createSelector(selectSometing, (state: SomeReducer) => state.dataInQuestion);
const getDataInQuestionUpdate => createSelector(selectDataInQuestion, () => Math.random()); 
// Using Math.random() to ensure a new value is always generated :)

While I can simply use a selector for dataInQuestion and disregard the assigned value, I was intrigued if there is a more efficient way to achieve this. Perhaps there exists a best practice for handling such scenarios.

Answer №1

After reviewing your request, it seems to focus on the latest action that sets off the reducer. In this case, you can simply monitor and react to this specific action by utilizing the ActionsSubject obtained through dependency injection.

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

Exploring the DynamoDB List Data Type

Currently, I am working on an angular 8 application where I have chosen to store JSON data in a list data type within DynamoDB. Inserting records and querying the table for data has been smooth sailing so far. However, I have run into some challenges when ...

undefined event typescript this reactjs

I have come across the following TypeScript-written component. The type definitions are from definitelytyped.org. I have bound the onWheel event to a function, but every time it is triggered, this becomes undefined. So, how can I access the referenced el ...

What is the counterpart of $.isEmptyObject({}) in Typescript for checking if an object is

Is there a formal method for testing an Object (response from server) to see if it is empty? Currently, I am using jQuery to accomplish this. this.http.post(url, data, {headers: headers}).then( result => { if (!$.isEmptyObject(result ...

Angular Compilation Blocked Due to Circular Dependency Error

Currently, I am utilizing WebStorm as my IDE to work on a personal project that I envision turning into a game in the future. The primary goal of this project is to create an Alpha version that I can showcase to potential employers, as I am actively seekin ...

Efficient Searching with Typescript and Lodash: Boosting Performance with Arrays and Objects

I am faced with the challenge of converting between two classes called MyObject and MyObjectJSON, which have helper methods to assist in the conversion process: myObj.toJSON() and MyObject.fromJSON(). Currently, I have instances of these classes represent ...

Display error messages upon submitting the form

I am currently working on an Angular 6 Form with validation. My main goal is to display error messages only after the form has been submitted. It is crucial that these messages remain constant while the user types in the input field. For instance, if a use ...

What is the best way to dynamically determine the base path for my templates in Angular 2?

Is it possible to dynamically define the base path of two versions of each template in order to use one or the other through configuration? How can I declare TEMPLATES_PATH so that it can be implemented as shown below: component.ts @Component({ temp ...

Align the running of Angular code with a for loop

I am currently working on a project with Angular 9 and Spring Boot as the backend. The nature of the project is CMS based, where users can create forms using reactive form technology. These forms have the capability to include multiple file upload fields. ...

Error: Unable to locate the reference for "foo" while utilizing TypeScript in combination with Webpack

My Chrome extension is functioning properly when using JavaScript alone. However, when attempting to incorporate TypeScript with Webpack, I encountered an issue where the function foo could not be found. Uncaught ReferenceError: foo is not defined Here ...

Tips for preserving @typedef during the TypeScript to JavaScript transpilation process

I have a block of TypeScript code as shown below: /** * @typedef Foo * @type {Object} * @property {string} id */ type Foo = { id: string } /** * bar * @returns {Foo} */ function bar(): Foo { const foo:Foo = {id: 'foo'} return f ...

After upgrading from angular-cli version 4 to version 7, the npm installation process stops working

I have been working on transitioning my Angular4 project to Angular7. Here are the steps I took in order to make this conversion: I first uninstalled the older version of angular-cli Next, I installed the latest updated version of angular-cli However, up ...

Obtaining JSON data in an Angular service: A beginner's guide

My JSON file has the following structure: { "user": [ { "id": 0, "data": [ { "userName": "iheb", "useremail": "", "userPassword": "kkk" } ], "questionnaireListe": [ { ...

A step-by-step guide to integrating a legend on a leaflet map using Angular and the ngx-leaflet plugin

I am attempting to integrate a legend into a map generated using Asymmetrik/ngx-leaflet. The tutorial I followed for creating the map can be found at https://github.com/Asymmetrik/ngx-leaflet. There are two distinct layers on the map, each requiring its ow ...

Conditional validation in Typescript based on the nullability of a field

I have come across the following code snippet: type DomainFieldDefinition<T> = { required?: boolean } type DomainDefinition<F, M> = { fields?: { [K in keyof F]: DomainFieldDefinition<F[K]> }, methods?: { [K in keyof M]: M[K] & ...

The latest version of https-proxy-agent is now 3.0.0, however, the npm audit is still indicating that

After the fix was provided for the NPM package https-proxy-agent on October 18, 2019, upgrading to the latest version still resulted in 6 high vulnerabilities being displayed in the audit warning. Even after running npm audit fix or npm audit fix --force ...

Exploration of narrowing union types in React with TypeScript

import { Chip } from "@mui/material"; type CourseFilterChipsRangeType = { labels: { from: string; to: string }; values: { from: number; to: number }; toggler: (from: number, to: number) => void; }; type CourseFilterChipsCheckType = { ...

There is no throttleTime function available in Angular 6 within Rx Js

Currently, my Angular 6 project is utilizing angular/cli": "~6.1.5 and rxjs": "^6.0.0. As a newcomer to Angular 6, I decided to dive into the official documentation to enhance my understanding. Here's a reference link I found useful: http://reactivex ...

When publishing, TypeScript-compiled JS files fail to be included, even though they are included during the build process in Debug and Release modes

My .NET MAUI project includes TypeScript files in the Scripts\scriptfiles.ts folder, which are compiled into wwwroot\js\scriptfiles.js. Everything functions properly until my client attempts to publish it, at which point all script files go ...

Issue found in ng-bootstrap.js ng-bootstrap for Angular 6

Recently, I added ng-bootstrap to my Angular project and included its modules. However, upon checking the CLI, an error was displayed. "WARNING in ./node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js 9853:57-75 "export 'ɵɵdefineInj ...

Can you identify the category of the new Set containing the elements 1, 2, and 3?

As a beginner in TypeScript, I'm currently exploring the appropriate type for JavaScript's new Set([1, 2, 3]), but my search has been unsuccessful so far. For instance: const objNums: {[key: string]: number} = {one: 1, two: 2, three: 3}; const a ...