Что такое React Context? В чём его отличие от Redux?

Question

React Context — это встроенный в React механизм для передачи данных через дерево компонентов без необходимости прописывать props на каждом уровне. Redux — это независимая библиотека для управления состоянием всего приложения, предоставляющая строгие правила его изменения (через actions и reducers) и мощные инструменты для отладки. Context решает проблему "проброса пропсов", а Redux — проблему предсказуемого управления сложным, глобальным состоянием.

YeaHub · Accepted Answer

Оба инструмента помогают работать с данными, но делают это на разных уровнях и с разными целями.React ContextЧто это: Механизм для сквозной передачи данных. Позволяет создать "контекст" (источник данных) на верхнем уровне и потреблять эти данные в любом дочернем компоненте, где бы он ни находился, минуя промежуточные компоненты.Как используется: Создается с помощью React.createContext(). Поставщик (<MyContext.Provider>) оборачивает часть дерева и передает значение. Компоненты-потребители используют хук useContext(MyContext) для доступа к этому значению.Основная цель: Избежание "проп drilling" (проброса пропсов через множество несвязанных компонентов).ReduxЧто это: Библиотека для управления состоянием приложения, основанная на принципах Flux. Хранит все состояние в одном неизменяемом хранилище (Store).Как используется: Состояние изменяется только через "действия" (actions) и "редьюсеры" (reducers) — чистые функции, которые предсказуемо вычисляют новое состояние на основе предыдущего и действия.Основная цель: Предоставить предсказуемый, централизованный и отлаживаемый способ управления сложным состоянием, которое активно используется в разных частях приложения.