Questions tagged [ngrx]

NgRx is a reactive state management library for Angular based on flux design pattern.

NgRx provides a set of reactive libraries for Angular.

It includes:

Store: RxJS powered state management for Angular applications, inspired by Redux

Effects: RxJS powered side effect model for @ngrx/store

Entity: Entity State adapter for managing record collections.

Router-Store: Bindings to connect the Angular Router with @ngrx/store

Store-DevTools: Developer Tools for @ngrx/store

DB: RxJS powered IndexedDB for Angular apps


See Official Docs for more Info

4430 questions
1
vote
1 answer

how to resolve this error "ERROR TypeError: Cannot delete property '0' of [object Array]"

on(deleteAnswerAction, (s, { answerId }) => { const findAnswerIndex = s.findIndex((item) => item.id === answerId); return s.splice(findAnswerIndex, 1); }), this is my reducer on dispatching action deleteAnswer it should delete the answer…
1
vote
2 answers

How to update all entities at once - NGRX?

I need to update the isExpanded property in all entities. I tried to do this with reduce() but got nested objects with v key :/ function updateAllIsExpanded(state, isExpanded): any { return Object.entries(state.entities).reduce( (p, [k, v])…
JanuszFrontEnd'u
  • 451
  • 6
  • 14
1
vote
2 answers

How to sort entities by any property in ngrx

In the documentation I found a simple example using sortComparer, the problem is that we only sort by name and if I want to do it by different properties, I have to somehow provide information about the key / property. I know that I can keep sorting…
JanuszFrontEnd'u
  • 451
  • 6
  • 14
1
vote
0 answers

MergeMap in Ngrx Effect cause types error

i have NgRX effect class which i think is almost the same as in docs. import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from…
Zaben
  • 117
  • 8
1
vote
2 answers

Is it a bad practice to pass callbacks via ngrx actions

Consider the following case: A modal must be closed after an action succeeds. Would this be a viable solution: @Component({ selector: 'user-delete-dialog', templateUrl: './user-delete-dialog.component.html', styleUrls:…
Thomas
  • 21
  • 2
1
vote
1 answer

Limiting the size of Ngrx entity

I am building an app that will fetch data from a websocket, and the size of entity will increase overtime. I want to remove the old items when the size exceeds maximum. I currently use selectTotal$ to get the current size of the entity and if it…
Chi
  • 355
  • 4
  • 14
1
vote
1 answer

Removing item from store is not working in NgRx

I am learning NgRx. So I have created a small app. There is two text fields to add items and show items as a list. I can add item to the list. But I can't delete the item from the list. Here is the code: Actions: import { Action } from…
mnu-nasir
  • 1,642
  • 5
  • 30
  • 62
1
vote
2 answers

In unit test: How to override an NGRX selector which is created by entityAdapter.getSelectors()

Assume that our app has a books page. We are using: Angular, NGRX, jest. Some lines of code to give a context (see actual problem below): Interfaces of the books page's state: export interface Book { bookID: string; whatever: string; } export…
Burnee
  • 2,453
  • 1
  • 24
  • 28
1
vote
0 answers

Using ReduxDevTools in Storybook with Angular NGRX - Is there a solution?

I have a simple Angular Component wired up to an NGRX store. It works in the live application but not in the Storybook render. I have created a simple action and it should trigger in the ngOnInit() function. I have logged the reducer and can see the…
cuznerdexter
  • 586
  • 5
  • 21
1
vote
0 answers

Change NGRX data additionalCollectionState property

I want to change NgRx data additionalCollectionState property count when I request to getWithQuery. Unfortunately there is no change. EntityMetaData Dev Tools @Injectable() export class CourseLevelDataService extends DefaultDataService { …
Murad Agha
  • 11
  • 2
1
vote
1 answer

Tricks to prevent specific selector to emit value when new action dispatched?

In a same component, I have following code: this.store.select(state => state.someProperty)).pipe( takeUntil(this.destroy$), // distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)) ).subscribe(val…
Vincent
  • 1,178
  • 1
  • 12
  • 25
1
vote
0 answers

Angular ngrx reducer

I am recently learning Angular with @ngrx/store while one of the tutorial is to use @ngrx/store for state management, I'm trying to use ngrx to add data in a table ( table from angular material ) using input but I have an error that I don't…
heliot truste
  • 45
  • 1
  • 6
1
vote
1 answer

Registering reducer in app.module shows error in angular ngrx state management

I am creating an application in Angular 12 and the latest NgRx library for turorial purposes. I have the below model, action, reducer, and app state class. Model export interface Tutorial { name: string; url: string; } Actions import {…
mnu-nasir
  • 1,642
  • 5
  • 30
  • 62
1
vote
0 answers

.ts(2322) Property 'payload' is missing in type 'Action' but required in type 'AddIngredient'

I have been trying to create a sample application to learn ngrx, my application has only one 'Action' ADD_INGREDIENT and it has a reducer function which does operations on the state based on the action types. my actions file import { Action } from…
Atta salah
  • 11
  • 2
1
vote
1 answer

How to get only first value in ngrx action in angular component?

Problem: I need to get response. At first will be called: this.store.dispatch(new UpdateRequest(data)); then, if success, response will be in : this.actions.pipe(ofType(ActionTypes.UPDATE_SUCCESS)) or if error: …
deepdeer
  • 11
  • 1
1 2 3
99
100