Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке NGXS?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**NGXS** - це бібліотека для керування станом в Angular, схожа на NgRx, але з **простішим синтаксисом** і **меншою кількістю бойлерплейту**.

Якщо NgRx схожий на Redux з RxJS,
то NGXS більше схожий на **класову, «Angular-style»** реалізацію state management.

### Що робить NGXS:

1. **Зберігає стан застосунку в Store**
   - як і в NgRx, увесь стан централізовано
   - його можна читати й оновлювати
2. **Працює через Actions**
   - дії описують, *що сталося*
   - вони викликають методи всередині `State`-класів
3. **Використовує класи замість редюсерів**
   - не потрібно писати 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.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати266 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.