В чем разница между Actions и Reducers

Question

В чем разница между Actions и Reducers

Тип вопроса: React Вероятность: 10% Категория: Frontend Разработчик

Ответ

Actions — это простые объекты, которые описывают событие в приложении. Они содержат обязательное поле type и могут включать дополнительные данные (payload).

Reducers — это чистые функции, которые принимают текущее состояние и action, возвращают новое состояние. Они определяют, как состояние изменяется в ответ на action.

Пример:

// Action
const increment = { type: 'INCREMENT', payload: 1 };

// Reducer
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload;
    default:
      return state;
  }
}

Ключевые отличия:

Actions — это события, reducers — обработчики.
Actions не изменяют состояние, reducers — да.
Reducers должны быть чистыми (без side effects).

Ответ 18+ 🔞

Ну, слушай, вот есть у тебя приложение, да? И в нём постоянно какая-то хуйня происходит: пользователь кнопку тыкнул, данные с сервера припёрлись, таймер сработал. Так вот, эта вся хуйня — это и есть события, или, на нашем языке, экшены (actions).

Экшен — это просто такой бумажный самолётик, в котором написано, что случилось. У него обязательно должна быть бумажка с надписью type, ну, чтобы понятно было, что за событие. А ещё в него можно запихнуть дополнительные бумажки — payload (полезную нагрузку). Всё, больше от него нихуя не требуется. Он просто летит и кричит: «Эй, случилось вот это!»

// Вот смотри, летит самолётик-экшен. Кричит: "ИНКРИМЕНТ!"
const increment = { type: 'INCREMENT', payload: 1 };

А теперь, внимание, появляется второй персонаж — редьюсер (reducer). Представь себе самого спокойного и законопослушного бухгалтера на свете. У него на столе лежит текущий баланс (state). В окошко влетает бумажный самолётик (action). Бухгалтер его ловит, смотрит на бумажку type и говорит: «Ага, „ИНКРИМЕНТ“. Значит, к текущему балансу надо прибавить то, что в payload». И аккуратно, чётко, по правилам, выводит новый баланс. Он никогда не портит старый баланс, он всегда создаёт новый листочек с новым числом. И главное — он чистая функция, то есть никаких левых звонков, никаких внезапных изменений данных на стороне. Только математика, сука!

// А вот и наш бухгалтер-редьюсер. Спокойный, как удав.
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload; // Всё по правилам, новый листок.
    default:
      return state; // Если самолётик непонятный — игнорируем, баланс не трогаем.
  }
}

Короче, разница на пальцах:

Экшен (Action) — это событие. Кричит «Что случилось!». Сам он нихуя не меняет.
Редьюсер (Reducer) — это обработчик. Сидит, слушает эти крики, и по чётким правилам решает, как поменять состояние. Он единственный, кому можно его трогать.
Главная заповедь редьюсера: будь чистым, ёпта! Никаких побочных эффектов. Пришёл старый state и action — ушёл новый state. Всё.

Вот и вся магия. Экшены носятся, орут, а редьюсеры их успокаивают и аккуратно пересчитывают циферки. Без этой дисциплины был бы пиздец, а не приложение.