Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@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.
11.0.0-rc.0 (2021-02-04)
<a name="11.0.0-beta.2"></a>
FAQs
Reactive store for component state
The npm package @ngrx/component-store receives a total of 159,493 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.