What is @ngrx/component-store?
@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.
What are @ngrx/component-store's main functionalities?
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)
)
))
)
);
}
```
Other packages similar to @ngrx/component-store
ngxs
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
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
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.
13.0.0-beta.0 (2021-11-04)
Bug Fixes
- component: remove class-level generic from PushPipe (#3127) (548c72c), closes #3114
- store: infer initial store state properly with metareducers (#3102) (d003b85), closes #3007
- store: remove store config from forFeature signature with slice (#3218) (b1a64dd), closes #3216
build
Features
- effects: move createEffect migration to ng-update migration (#3074) (5974913)
- store: add createFeatureSelector migration (#3214) (62334f9)
- store: provide better TS errors for action creator props (#3060) (5ed3c3d), closes #2892
BREAKING CHANGES
- The minimum version required for Angular and RxJS has been updated
BEFORE:
Angular 12.x is the minimum version
RxJS 6.5.x is the minimum required version
AFTER:
Angular 13.0.0-RC.0 is the minimum version
RxJS 7.4.x is the minimum required version
- store: The
StoreConfig
argument is removed from the StoreModule.forFeature
signature with FeatureSlice
.
BEFORE:
The StoreModule.forFeature
signature with FeatureSlice
has StoreConfig
as the second input argument, but the configuration isn't registered if passed.
AFTER:
The StoreModule.forFeature
signature with FeatureSlice
no longer has StoreConfig
as the second input argument.
- store:
initialState
needs to match the interface of the store/feature.
BEFORE:
Missing properties were valid
StoreModule.forRoot(reducers, {
initialState: { notExisting: 3 },
metaReducers: [metaReducer],
});
AFTER:
A type error is produced for initialState that does not match the store/feature
StoreModule.forRoot(reducers, {
initialState: { notExisting: 3 },
metaReducers: [metaReducer],
});
- component: PushPipe no longer has a class-level generic type parameter.
BEFORE:
Use of PushPipe outside of component templates required a generic
AFTER:
Use of PushPipe outside of component templates no longer requires a generic
- store: Types for props outside an action creator is more strictly checked
BEFORE:
Usage of props
outside of an action creator with invalid types was allowed
AFTER:
Usage of props
outside of an action creator now breaks for invalid types
- effects: The create-effect-migration migration is removed
BEFORE:
The Effect decorator removal and migration are done manually through schematics.
AFTER:
The Effect decorator removal and migration are performed automatically on upgrade to version 13 of NgRx Effects.
<a name="12.5.1"></a>