Что такое reducer и actions в React?

Основы Redux: Actions и Reducers

В React для управления сложным состоянием часто используют Redux. Ключевые понятия — actions и reducers. Actions — это простые объекты, которые описывают, что произошло в приложении. Они содержат обязательное поле type (строку-идентификатор) и необязательное payload (данные). Например, { type: 'INCREMENT', payload: 1 }.

Reducer — это чистая функция, которая определяет, как состояние изменяется в ответ на action. Она принимает два аргумента: текущее состояние и action, и возвращает новое состояние. Важно, что reducer не мутирует исходное состояние, а создаёт его копию с изменениями. Это делает состояние предсказуемым и легко тестируемым.

Пример кода

// action creator
const increment = (amount) => ({
  type: 'INCREMENT',
  payload: amount
});

// reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload;
    case 'DECREMENT':
      return state - action.payload;
    default:
      return state;
  }
};

// использование в store
const store = createStore(counterReducer);
store.dispatch(increment(5));
console.log(store.getState()); // 5

В этом примере action creator возвращает объект action, который затем передаётся в reducer через dispatch. Reducer обрабатывает action и возвращает новое состояние. Такой подход позволяет централизованно управлять состоянием и легко отслеживать изменения.

Где применяется

Redux используется в крупных React-приложениях, где много компонентов обмениваются данными. Он особенно полезен при работе с серверными данными, кэшированием, сложными формами и совместным редактированием. Однако для простых приложений можно обойтись встроенным useState или useReducer.

Итог: Actions и reducers — фундамент Redux. Они обеспечивают предсказуемое обновление состояния, упрощают отладку и тестирование. Применяйте Redux, когда состояние становится сложным и требует глобального доступа из многих компонентов.