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

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

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

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

Контент

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

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

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

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

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

Щоб підключити NgRx Store до Angular-застосунку, потрібно пройти кілька простих кроків:

### 1. **Встановити NgRx**

У терміналі:

```bash
npm install @ngrx/store
```

(пізніше можна додати й інші частини: `@ngrx/effects`, `@ngrx/store-devtools`, `@ngrx/entity` тощо)

### 2. **Створити початковий стан і reducer**

Приклад: `counter.reducer.ts`

```ts
import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export const initialState = 0;

export const counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1),
  on(reset, _ => 0)
);
```

### 3. **Створити actions**

Приклад: `counter.actions.ts`

```ts
import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');
```

### 4. **Додати Store в AppModule**

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({ count: counterReducer })  // підключаємо reducer
  ],
  bootstrap: [/* ваш кореневий компонент */]
})
export class AppModule {}
```

### 5. **Використати Store в компоненті**

```ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="decrement()">-</button>
    {{ count$ | async }}
    <button (click)="increment()">+</button>
    <button (click)="reset()">Reset</button>
  `
})
export class CounterComponent {
  count$ = this.store.select(state => state.count); // отримуємо значення

constructor(private store: Store<{ count: number }>) {}

increment() {
    this.store.dispatch(increment());
  }

decrement() {
    this.store.dispatch(decrement());
  }

reset() {
    this.store.dispatch(reset());
  }
}
```

**Висновок:**
Ти підключаєш `StoreModule` в `AppModule`, створюєш actions і reducer та використовуєш `store.select()` і `store.dispatch()` у компонентах.
NgRx починає відстежувати стан і автоматично оновлює шаблон при змінах.

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

Для рев’юера

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

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