Podstawy NgRx Store

W tej lekcji poznają Państwo NgRx — zaawansowane rozwiązanie do zarządzania stanem aplikacji Angular.

Czym jest NgRx?

NgRx jest inspirowany biblioteką Redux i pomaga centralnie zarządzać stanem w aplikacjach Angular, upraszczając obsługę danych między komponentami.

Dlaczego warto używać NgRx?

• Centralne zarządzanie stanem
• Przejrzysty i przewidywalny przepływ danych
• Łatwiejsze debugowanie i testowanie

Podstawowe pojęcia

NgRx obejmuje kilka kluczowych pojęć:

• Store: przechowuje stan aplikacji
• Actions: opisują zdarzenia
• Reducers: obsługują zmiany stanu
• Selectors: pobierają dane ze stanu

Instalowanie NgRx Store

Zainstaluj NgRx za pomocą npm:

npm install @ngrx/store --save

Tworzenie Store

Zdefiniuj Store w module aplikacji:

StoreModule.forRoot({ appState: appReducer })

Tworzenie akcji

Akcje definiują zdarzenia w aplikacji:

export const loadData = createAction('[App] Load Data');

Reducery

Reducery obsługują zmiany stanu, reagując na akcje i generując nowy stan:

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

Podsumowanie

Poznali Państwo podstawy używania NgRx Store do skutecznego zarządzania stanem aplikacji. Dobra robota!