Questions tagged [ngrx]
NgRx presents an innovative approach to managing state in Angular through the utilization of reactive principles inspired by the influential flux design pattern.
This particular question is an extension of a post that can be found here. However, I believe my query is more focused and specific, so I feel it's worth pursuing an independent answer rather than relying solely on the linked post. Context In the aforeme ...
Issue: Error: No provider for Store! I am trying to initialize the store module in main.ts: platformBrowserDynamic().bootstrapModule(AppModule,[ provideStore({ characters, vehicles }) ]); Then I am injecting it into vehicle.component.ts: c ...
After successfully running on the first two action dispatches, the effects fail to trigger on the third time. I have tried the solutions provided in this thread and here, but none of them work for me. Here is the relevant code snippet: @Effect() get ...
Currently, I am enrolled in an Angular course to gain proficiency in ngrx. In a couple of months, I will be responsible for teaching it, so I am refreshing my memory on the concept. Strangely, even after installing it and ensuring my code is error-free, er ...
Dealing with catchError in the latest version of ngrx. effect$ = createEffect(() => this.actions$.pipe( ofType(contactAction), switchMap(({ data }) => this.postService.contact(data).pipe( map(() =& ...
I have developed an Ionic 3 application that utilizes NGRX for state management purposes. The app is designed to connect to a device via BLE technology. Within my connection page, where the BLE device is connected, I have implemented the following code: ...
I am faced with a dilemma where I must wait for my authentication server to return my token before calling my APIs. I am looking for a solution to ensure that my authState.token is not null before dispatching LoadMyStuffFromApi. I have implemented two res ...
I'm currently working with Angular 16 in combination with the ngRx framework. My development involves TypeScript coding and writing unit tests (.spec.ts) using Jasmine, especially for code similar to the example below. How do I invoke this method with ...
While using NGRX with Nativescript Angular to manage state and fetch data from the server, I've encountered an issue when suspending the app on IOS. Whenever the app is in the middle of fetching data from the server and gets suspended, the entire process h ...
Having issues with the installation of @ngrx/store My current setup includes: Node 8.9.3, NPM 5.5.1, Angular CLI 1.7.4, Angular 5.2.0 I am using Angular CLI to create a new Angular application and attempting to add @ngrx/store by running the following c ...
As I delve into the world of ngrx, I find myself struggling to fully understand and implement it effectively within my application. Recently, I integrated ngrx version 8.3 into my project in hopes of organizing my state management efficiently. My goal is ...
I am currently working on converting the code snippet to NGRX 15. As a newcomer to Angular, I could use some guidance. "@ngrx/effects": "^15.4.0" @Injectable() export class SnackbarEffects { @Effect({ dispatch: false }) cl ...
Encountered the following error while using @ngrx/store: index.js?4b23:19 State mutation is prohibited inside of reducers. (anonymous) @ index.js?4b23:19 (anonymous) @ index.ts:54 rootReducer @ index.ts:70 _initialStateFactory @ ng2.ts?2a33:24 AppModule ...
When developing, it's common to use the following imports: import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin'; import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin'; Is it recommended to remove these imports for production build ...
Currently, I am utilizing NgRx in an Angular NativeScript project for Android and iOS apps, and it is proving to be quite effective. However, one aspect that concerns me is the inability to use @ngrx/store-devtools and the Redux DevTools Chrome extension d ...
My current task involves dynamically creating multiple <mat-select> elements based on the number of "tag types" retrieved from the backend. These <mat-select> elements are then filled with tag data. Users have the ability to add new "tag types, ...
So in my Angular Application's app.module.ts file, I have the following setup: StoreModule.forRoot({ applicationState: applicationReducer, }), In my app.reducer.ts file, I have defined the initial state and a movies reducer like this: export const ...
In my Angular 2 application, I heavily utilize Ngrx stores which have proven to be extremely beneficial. I have a well-structured system in place for my stores where I use selectors to retrieve specific parts of the state. Normally, all the selectors work ...
I'm currently developing an application and I'm facing a challenge in implementing Redux effectively in this particular scenario. Unfortunately, due to restrictions at my workplace, normalizing data is not an option. Let's consider the foll ...
I'm attempting to retrieve an array of objects stored in the User model. I've created both an Action and an Effect for this purpose. The structure of the User Model is as follows: export interface User { _id: string, firstName: string, lastName: string, j ...
Every time I run the following code: valueToDisplay$ =store.select('model','sub-model') The value stored in valueToDisplay$ always corresponds to 'model'. Despite trying various approaches to properly project the state, it s ...
Is there a way to utilize Msal angular's loginRedirect(): void function instead of loginPopup(): Promise in an Ngrx Effect? I've been able to successfully implement the loginPopup() method, but since loginRedirect() has a void return type, it di ...
I currently have an object stored in a repository in the following format: export interface Referential { id: string; values: Array<ReferentialData>; } export interface ReferentialData { libelle: string; value: string; borderColor: string; ...
Here is the code snippet from my TypeScript file: this.store.pipe(select(subscribe.getRegCategories)).pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => { if (data && data.length) { this.allRegCategories = data; ...
When a selector changes its value, I want to trigger an action. To achieve this, I passed the selector with a subscription instead of passing an observable. selectedSchedulingsOnPopup$ = this.store.pipe(select(selectSchedulingsByBranch)); this.store.disp ...
This week we successfully updated our Angular v9 app to v11 and RXJS v6.6 with minimal issues. However, due to the store being in freeze mode, we are encountering errors when trying to update the store in certain areas of our code. While most of the issue ...
There is a certain selector that I'm working with, and it returns either true or false. To ensure accurate testing in my unit test, I need to cover scenarios where this value is both true and false. To set up for the test, I have initially configured the ...
I'm currently working on implementing a condition that will determine whether to throw an error or proceed with calling an API to retrieve a response. I'm seeking guidance on the best approach for this task. My knowledge of rxjs is limited as I ...
I am working with a service that provides a changing object over time. I need to unsubscribe from this service once the object contains a specific property or later when the property reaches a certain value. In situations like these, I typically rely on t ...
Take a look at this code snippet: loadProducts$ = createEffect(() => this.actions$.pipe( ofType(requestLoadProducts), switchMap(action => this.service.load().pipe( map(data => loadProducts({products: data})) )) ) , { dispatch ...
In an attempt to enhance the convenience of my application class, I decided to create a Sub-class EntityServices based on the NGRX/data documentation which can be found here. Despite following the provided example, it appears that it does not function pro ...
I have a situation where I am fetching data every 15 seconds from my web API in my Angular application. This continuous polling is causing the Angular Material expansion panel to reset to its default position, resulting in a slow website performance and in ...
Is it possible for a service to monitor state changes and make HTTP calls based on the state value without being triggered by an effect (NgRx)? In other words, can a service react to a portion of the store and eliminate the need for an effect to be involve ...
My program is stuck in an infinite loop and I can't figure out why. interface LatestAppointmentsWidgetState { loading: boolean; page: number; pagedData: Paged<Appointment>; } @Injectable() export class LatestAppointmentsWidg ...
I am working with two applications: one acts as the host and the other is a remote Micro Frontend (MFE). In the host application, I have the following code: @NgModule({ declarations: [AppComponent], imports: [ .......... StoreModule.forRoot( ...
Currently engrossed in a project revolving around state management for individual components utilizing Angular 7 and NGRX. The challenge at hand is to ensure scalability of the implementation, allowing multiple uses while maintaining independence. Thus fa ...
My component serves as a widget on a dashboard, and I am using *ngFor to render multiple widgets based on the dashboard's data. Each WidgetComponent receives some of its data via @Input() from the parent. parent <app-widget *ngFor="let widget ...
I am currently dealing with a complex data structure in an ngrx project. It consists of nested parent objects with multiple levels of child objects, which are normalized on the server side. Here is an overview of my store's layout: rootObjs: { level1: ...
I have an array of items stored in my ngrx/store. When the user clicks on a button, I need to retrieve a specific item based on its id and update its properties without using ngxr/entities. I have managed to achieve this functionality in my current imple ...
Within a component, we utilize an ngrx selector to access various segments of the state. public isListLoading$ = this.store.select(fromStore.getLoading); public users$ = this.store.select(fromStore.getUsers); The fromStore.method is formed using the ngrx ...
When using AOT in Angular, it is necessary to rewrite all functions and reducers to not utilize arrow functions: An error occurred: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function o ...
I've been experimenting with the ngrx store, but I'm encountering some difficulties: Mainly, I'm having trouble fetching information from the store. You can find my code here: https://github.com/FabioBiao/ngrxtTest In the home.component.ts file, I attem ...
I am attempting to link the location variable in my component to another variable in the store using a selector with ngrx v13 in Angular. However, when I include the variable with the property in the HTML, I encounter an error: Error message: Property &ap ...
When retrieving data from the store, I typically use the following method: ngOnInit(): void { this.store.pipe(select(getPerson)) this.store.dispatch(loadPerson()); } However, I am now faced with the challenge of transferring this data from the ...
I have a unique situation where my state contains JSON data like this: {id: "1", name: "ig1", description: "ig 11"} {id: "5", name: "hhh", description: "hhh"} {id: "6", name: "ggg", description: "hhh"} My goal is to specifically extract the data for id = ...
My current setup involves using Angular2, ngrx/store, and ngrx/effects for state management. I have encountered an issue where I am unable to display an error message when a specific action fails within an @Effects() block. Here is the problematic code sn ...
Please note that this is a question seeking clarification Instructions Needed I am currently working on dispatching an action to NgRx in order to add a task to a list of tasks. Additionally, I need to perform a put request to an API to save the changes ma ...
I have been in the process of upgrading a massive Angular 12 project to Angular 13 and have completed several steps. One significant change was the rewriting of Effects using a newer approach like createEffect(() => instead of @Effect However, during ...
Utilizing Angular 11.1.2 and rxjs 6.6.2 I am working on developing an application that dynamically displays a list of components. I have successfully achieved this functionality independently. However, I am currently encountering challenges when transitio ...
After adding "@ngrx/router-store" to my project, I noticed that it fills the app console in development mode and unit test results with a repeated message: The warning states that the "router" feature name does not exist in the state. To fix this, make ...
I am currently developing an Angular application and working on implementing a system where an NGRX effect will make requests to a service. This service will essentially perform two tasks: Firstly, it will check the local cache (sqlite) for the requested ...
On my website, there is a page that displays a range of products from the store managed by a reducer called products. When an action PRODUCTS.LOAD_ALL is dispatched, it triggers an API call through an effect and then sends a PRODUCTS.LOAD_ALL_SUCCESS actio ...
Is it necessary to incorporate Redux for every API call, even when the data is not shared among multiple components? For instance, consider a users-list component that needs to fetch and display the list of users exclusively within its own interface. Is ...
I am currently working on a feature reducer (slice reducer) called animals. My goal is to separate these reducers into categories such as mammals, birds, fishes, and more. Initially, I thought this would be a smooth process using the ActionReducerMap. How ...
I am currently faced with the challenge of catching an error when the variable selectionId, derived from my route, is null or contains an invalid value. My code structure has a mechanism in place to handle errors when the category variable is undefined, bu ...
Within my component, I am subscribing to the ngrx store for changes in a specific state. I need to implement a condition where if the current state is different from the previous state, then I should perform certain actions. Is there a way to retrieve the ...
In my autocomplete form control component: @Component({ selector: 'app-autocomplete', templateUrl: './app-autocomplete.view.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class AutoCompleteFilterComponent ...
After reviewing my code, I have encountered the following issues: In my shared.actions.ts file: import { Action } from '@ngrx/store'; import { Error } from '../error.interface'; export const types = { IS_LOADING: '[SHARED] IS_LOADING', TRIGGER_ERROR: ...
Is it possible to access my localhost:9000 in multiple tabs? If I open it in 3 tabs, will all those 3 tabs point to a single NGRX instance or will each tab of localhost have its dedicated NGRX instance? I haven't had the chance to test this yet. ...
Currently, I am utilizing ngrx/store with Angular 6. Within the store, there exists a deeply nested structure which I have concerns about in terms of its organization: const state = [ { aliases: ['alias1', 'alias2'], isRequir ...
I'm encountering difficulties in dispatching actions that require results from five other actions (all listed in my effect). Could someone lend a hand? Essentially, I need to trigger an action within the effect only after these five actions have returned ...
Having a state defined as: export interface ChatMessagesState { messages: Message[] | null; chatId: string; } and receiving data in the websocket like: newMessages: Message[] = [ { text: 'Hello', chatId: '100' }, { text ...
Throughout the sign up process, I make 3 http calls: signing up with an auth provider, creating an account within the API, and then logging in. If the signup with the auth provider fails (e.g. due to an existing account), the process still tries to create ...
As my Angular application continues to grow in size, the number of actions and effects also increases. How should I manage the growing action/effect files for a specific entity? I have attempted to separate actions into multiple files, but encountered an ...
I want to ensure that the data in the store is both loaded and matches the router parameters. Since the router serves as the "source of truth," I plan on sending an action to fetch the data if it hasn't been loaded yet. Is it acceptable to perform these ...
When working with Angular applications, it is common to use the following approach to manage shared states: import { BehaviorSubject } from 'rxjs'; interface User { id: number; } class UserService { private _users$ = new BehaviorSubject([]) ...
Curiosity strikes me on how to send the default data already present in getWithQuery(), just like this: @Injectable({providedIn: 'root'}) export class CompaniesDataService extends DefaultDataService<Company> { private readonly _URL: string = '/ap ...
Is there a way to ensure that a dispatch is completed before selecting from a store? I haven't had any luck finding a solution online. How can I make sure the dispatch finishes before selecting from the store? I would appreciate any help with my code. ** ...
My selector relies on another one, requiring the userId to function properly. Now, I want to enhance the selector to also accept a property named "userFriend". However, there seems to be an issue with passing this new parameter, as it only recognizes the ...
Within my Effects function, I have implemented the following code structure. I have included a few lines of code for the catchError block to ensure that: Any errors are handled by the state/store The errors are forwarded to the global error handler / Int ...
export class Ingredient { public name: string; public amount: number; constructor(name: string, amount: number) { this.name = name; this.amount = amount; } } List of Ingredients: export const initialIngredients: Ingredient ...
I've encountered an issue while using APP_INITIALIZER. The function appears to be functioning correctly, as it hits the endpoint and returns with resolve(true). However, all I see on the screen is a blank page. There are no errors in the console. Here ...
Here is the file that I need to test. My current focus is on some effects service while working with Angular5 (^5.2.0) and ngrx5 (^5.2.0). I have been struggling to properly implement the code below for testing purposes. Any tips or suggestions would be ...
I am utilizing ngrx effect for handling user login in my application: @Effect() authLogin = this.actions$.pipe( ofType(LOGIN_START), switchMap(() => this.http.post('/user/login') .pipe( catchError( (response) => ...
I'm currently tackling two very similar test cases where I need to confirm that two NgRx effects are returning a stream of booleans. While everything is running smoothly in the first test case, I'm encountering difficulties with the second one. No matter w ...