Объясните принцип работы Actions, Reducers, Effects в NgRx.angular-64

NgRx — это state management библиотека для Angular, основанная на Redux. Она использует три ключевых концепции: Actions, Reducers и Effects. Рассмотрим каждую из них подробно.

1. Actions

Actions — это простые объекты, которые описывают событие в приложении. Они содержат:

  • type — уникальная строка, описывающая действие (например, [User] Load Users).
  • payload (опционально) — данные, связанные с действием.

Пример Action:

export const loadUsers = createAction(
  '[User] Load Users',
  props<{ users: User[] }>()
);

Как работают Actions?

  • Инициируются компонентами или сервисами через store.dispatch(action).
  • Передаются в Reducers и Effects для обработки.

2. Reducers

Reducers — это чистые функции, которые:

  1. Принимают текущее состояние (state) и действие (action).
  2. Возвращают новое состояние на основе действия (не изменяя исходное состояние!).

Пример Reducer:

const userReducer = createReducer(
  initialState,
  on(loadUsers, (state, { users }) => ({ ...state, users })),
  on(addUser, (state, { user }) => ({ ...state, users: [...state.users, user] }))
);

Ключевые особенности Reducers:

  • Чистые функции: не имеют побочных эффектов (например, HTTP-запросов).
  • Иммутабельность: всегда возвращают новый объект состояния.

3. Effects

Effects — это механизм для обработки побочных эффектов (например, HTTP-запросов). Они:

  1. Слушают действия (Actions).
  2. Выполняют асинхронные операции.
  3. Возвращают новые действия в Store.

Пример Effect:

loadUsers$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadUsers),
    switchMap(() => this.userService.getUsers().pipe(
      map(users => loadUsersSuccess({ users })),
      catchError(error => of(loadUsersFailure({ error })))
    )
  )
);

Как работают Effects?

  • Используют RxJS для управления потоком действий.
  • После асинхронной операции диспатчат новые действия (например, успех/ошибку).

Взаимодействие между Actions, Reducers и Effects

  1. Компонент диспатчит действие (например, loadUsers).
  2. Effect перехватывает действие, выполняет API-запрос и диспатчит loadUsersSuccess.
  3. Reducer обрабатывает loadUsersSuccess и обновляет состояние.
  4. Компонент получает обновленные данные через селектор.

Резюмируем

  • Actions — события с типом и данными.
  • Reducers — чистые функции для обновления состояния.
  • Effects — обработка побочных эффектов (например, HTTP-запросов).

NgRx помогает управлять состоянием приложения предсказуемо и масштабируемо, разделяя логику на отдельные слои.

Вопросы

Собеседования