Akcje i reduktory

Akcje i reduc ery

Dowiedzą się Państwo, jak zarządzać stanem w aplikacjach NgRx za pomocą akcji i reducerów.

Akcje opisują unikatowe zdarzenia lub operacje w aplikacji, takie jak ładowanie danych czy interakcje użytkownika.

Twórz akcje za pomocą createAction():

export const login = createAction('[Login Page] Login');

Przekazuj dane wraz z akcjami za pomocą właściwości payload:

export const loadUser = createAction('[User] Load', props<{ userId: number }>());

Reducery obsługują przejścia między stanami na podstawie akcji. Zwracają nowe stany bez bezpośredniej modyfikacji istniejącego stanu.

Użyj createReducer, aby zdefiniować sposób zmiany stanu:

export const userReducer = createReducer(
  initialState,
  on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Reducery muszą zawsze zwracać nowe obiekty stanu. Nigdy nie modyfikuj bezpośrednio istniejącego stanu.

on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Połącz wiele reducerów w jeden główny reducer, aby zarządzać złożonym stanem:

StoreModule.forRoot({ users: userReducer, posts: postReducer })

Podsumowanie

Poznali Państwo tworzenie akcji i reducerów do skutecznego zarządzania stanem w Angularze za pomocą NgRx!