> Что такое Redux, зачем он нужен и как устроен (React)

Redux - это предсказуемый контейнер состояния для JavaScript-приложений, чаще всего используемый с React. Он нужен для централизованного управления данными, когда состояние становится сложным: множество компонентов обмениваются информацией, а передача пропсов через несколько уровней (prop drilling) становится неудобной.

Как устроен Redux:

• Store - единственный объект, хранящий всё состояние приложения.
• Actions - простые объекты с полем type, описывающие, что произошло (например, { type: 'ADD_TODO', payload: 'Купить хлеб' }).
• Reducers - чистые функции, которые принимают текущее состояние и action, и возвращают новое состояние. Они не мутируют исходное состояние, а создают его копию.
• Dispatch - метод store для отправки action в reducer.
• Selectors - функции для извлечения части состояния из store.

Зачем нужен:

• Единый источник правды (single source of truth) - состояние предсказуемо.
• Упрощает отладку (Redux DevTools позволяют путешествовать по истории изменений).
• Улучшает тестируемость - reducers и actions легко тестировать изолированно.

Пример простого использования с React:

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

// store
const store = createStore(counterReducer);

// компонент
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: 'INCREMENT' })}>{count}</button>;
}

Современная альтернатива - Redux Toolkit, который упрощает настройку store и уменьшает шаблонный код.