Як підключити NgRx Store до застосунку?

AngularJunior~1 хв читання

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

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

У терміналі:

bash

npm install @ngrx/store

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

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

Приклад: counter.reducer.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

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

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 в компоненті

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 починає відстежувати стан і автоматично оновлює шаблон при змінах.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Як підключити NgRx Store до застосунку?

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

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

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

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

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