Що таке NGXS?
NGXS - це бібліотека для керування станом в Angular, схожа на NgRx, але з простішим синтаксисом і меншою кількістю бойлерплейту.
Якщо NgRx схожий на Redux з RxJS, то NGXS більше схожий на класову, «Angular-style» реалізацію state management.
Що робить NGXS:
- Зберігає стан застосунку в Store
- як і в NgRx, увесь стан централізовано
- його можна читати й оновлювати
- Працює через Actions
- дії описують, що сталося
- вони викликають методи всередині
State-класів
- Використовує класи замість редюсерів
- не потрібно писати switch/case
- просто створюєш методи з декораторами
Приклад NGXS:
ts
// дії
export class Increment {
static readonly type = '[Counter] Increment';
}
export class Decrement {
static readonly type = '[Counter] Decrement';
}ts
// стан
@State<number>({
name: 'count',
defaults: 0
})
@Injectable()
export class CounterState {
@Action(Increment)
increment(ctx: StateContext<number>) {
const state = ctx.getState();
ctx.setState(state + 1);
}
@Action(Decrement)
decrement(ctx: StateContext<number>) {
const state = ctx.getState();
ctx.setState(state - 1);
}
}ts
// компонент
export class MyComponent {
count$ = this.store.select(state => state.count);
constructor(private store: Store) {}
plus() {
this.store.dispatch(new Increment());
}
}Чим відрізняється від NgRx:
| NGXS | NgRx | |
|---|---|---|
| Синтаксис | простіший, класи, декоратори | строгіший, на функціях |
| Reducers | немає - використовуються методи в класах | є - чисті функції |
| Ефекти | називаються @Action() або @Effect() | createEffect() |
| RxJS | використовується, але менше | використовується активно |
Висновок:
NGXS - це більш «Angular-подібна» альтернатива NgRx, з меншою кількістю коду. Підходить, якщо хочеться керувати станом централізовано, але без усієї важкості NgRx.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.