@ngrx/component-store
Advanced tools
@ngrx/component-store is a library for managing local/component state in Angular applications. It provides a simple and reactive way to manage state within Angular components, leveraging RxJS for state management and side effects.
State Management
This feature allows you to manage the state within a component. The `ComponentStore` class is used to define the state and provide methods to update it.
```typescript
import { ComponentStore } from '@ngrx/component-store';
interface State {
count: number;
}
@Injectable()
class CounterStore extends ComponentStore<State> {
constructor() {
super({ count: 0 });
}
readonly increment = this.updater((state) => ({ count: state.count + 1 }));
readonly decrement = this.updater((state) => ({ count: state.count - 1 }));
readonly reset = this.updater(() => ({ count: 0 }));
}
```Selectors
Selectors are used to derive and expose slices of the state. The `select` method allows you to create observables that emit state changes.
```typescript
@Injectable()
class CounterStore extends ComponentStore<State> {
constructor() {
super({ count: 0 });
}
readonly count$ = this.select(state => state.count);
}
```Effects
Effects are used to handle side effects, such as HTTP requests. The `effect` method allows you to define observables that can trigger state changes based on external events.
```typescript
@Injectable()
class CounterStore extends ComponentStore<State> {
constructor(private readonly http: HttpClient) {
super({ count: 0 });
}
readonly loadCount = this.effect((trigger$) =>
trigger$.pipe(
switchMap(() => this.http.get<number>('/api/count').pipe(
tapResponse(
(count) => this.patchState({ count }),
(error) => console.error(error)
)
))
)
);
}
```NGXS is a state management library for Angular that is modeled after the Redux pattern. It provides a more opinionated and structured approach to state management compared to @ngrx/component-store, with features like actions, selectors, and middleware.
Akita is a state management library for Angular applications that focuses on simplicity and performance. It provides a more flexible and less opinionated approach compared to @ngrx/component-store, with features like entity stores and query services.
Angular-Redux is a library that integrates Redux with Angular. It provides a way to manage global state using the Redux pattern, which can be more complex and boilerplate-heavy compared to the local state management provided by @ngrx/component-store.
The sources for this package are in the main NgRx repo. Please file issues and pull requests against that repo.
14.0.0-beta.0 (2022-05-30)
LetDirective is strongly typed when null or
undefined is passed as input.BEFORE:
<p *ngrxLet="null as n">{{ n }}</p>
<p *ngrxLet="undefined as u">{{ u }}</p>
n is any.u is any.AFTER:
<p *ngrxLet="null as n">{{ n }}</p>
<p *ngrxLet="undefined as u">{{ u }}</p>
n is null.u is undefined.Creating actions, reducers, and effects is possible without using the creator syntax is possible.
AFTER:
--creators (and -c) is removed from the schematic options.skipTests option is removed while generating actions.BEFORE:
Minimum version of Angular was 13.x
AFTER:
Minimum version of Angular is 14.x
BEFORE:
The change detection is triggered via changeDetectorRef.detectChanges
in zone-less mode.
AFTER:
The change detection is triggered via ɵmarkDirty in zone-less mode.
$error property from LetDirective's view context is
a thrown error or undefined instead of true/false.BEFORE:
<p *ngrxLet="obs$; $error as e">{{ e }}</p>
e will be true when obs$ emits error event.e will be false when obs$ emits next/complete event.AFTER:
<p *ngrxLet="obs$; $error as e">{{ e }}</p>
e will be thrown error when obs$ emits error event.e will be undefined when obs$ emits next/complete event.<a name="13.1.0"></a>
FAQs
Reactive store for component state
The npm package @ngrx/component-store receives a total of 170,421 weekly downloads. As such, @ngrx/component-store popularity was classified as popular.
We found that @ngrx/component-store demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.