Имя: Использование API Context и Redux для обмена состоянием между не родственными компонентами в React

В React, состояние (state) является объектом, который содержит данные и определяет, как компонент рендерится и ведет себя. В некоторых случаях, нам нужно поделиться состояние между двуми компонентами, которые не являются родительским и дочерним. Для этого мы можем использовать API Context или Redux.

API Context

API Context был введен в React 16.3 и позволяет передавать данные через дерево компонентов без необходимости передавать props вручную на каждом уровне. Это делает его идеальным для передачи данных между компонентами, которые не имеют прямой родительско-детской связи.

Пример:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme} />;
}

// ThemedButton теперь имеет прямой доступ к теме, несмотря на то,
// что находится глубоко в дереве компонентов. 

Redux

Redux - это библиотека для управления состоянием приложения. Она предоставляет централизованное хранилище для всего состояния вашего приложения и позволяет любому компоненту получить доступ к любому состоянию, которое он нуждается, без необходимости передавать props через дерево компонентов.

Пример:

import { createStore } from 'redux'

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

let store = createStore(counter)

store.subscribe(() => console.log(store.getState()))

store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

В обоих примерах, информация смогла быть передана между компонентами, которые не имеют прямого родительского или дочернего отношения друг к другу. Если ваши данные не обязательно связаны с UI, и вы хотите поделиться состоянием между несколькими компонентами, Redux или API Context - это то, что вам нужно.