Действия и редьюсеры

Узнайте, как управлять состоянием в приложениях NgRx с помощью действий и редьюсеров.

Что такое действия

Действия описывают уникальные события или операции в приложении, например загрузку данных или взаимодействие с пользователем.

Создание действий

Создавайте действия с помощью createAction():

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

Данные действий

Передавайте данные вместе с действиями с помощью полезной нагрузки:

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

Редьюсеры

Редьюсеры обрабатывают переходы состояния на основе действий. Они возвращают новые состояния, не изменяя существующее состояние напрямую.

Создание редьюсеров

Используйте createReducer, чтобы определить, как изменяется состояние:

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

Обновление состояния

Редьюсеры всегда должны возвращать новые объекты состояния. Никогда не изменяйте существующее состояние напрямую.

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

Объединение редьюсеров

Объедините несколько редьюсеров в один корневой редьюсер для управления сложным состоянием:

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

Итоги

Вы узнали, как создавать действия и редьюсеры для эффективного управления состоянием в Angular с помощью NgRx!