Как создать глобальное состояние с помощью Context API?

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

Чтобы создать глобальное состояние с использованием Context API, выполните следующие шаги:

Создайте контекст:

import React, { createContext, useState } from 'react'; 
const GlobalContext = createContext(); // Создаем контекст

Создайте провайдер для управления состоянием:

const GlobalProvider = ({ children }) => {
  const [state, setState] = useState({ user: null });  
  
  const updateUser = (user) => {
      setState({ user }); // Функция для обновления состояния  
  };  
  
  return (  
    <GlobalContext.Provider value={{ state, updateUser }}>    
      {children}    
    </GlobalContext.Provider>  
  ); 
};

Здесь GlobalProvider хранит состояние и функции для его обновления и предоставляет их через GlobalContext.Provider.

Используйте провайдер в вашем приложении:

function App() {
  return (  
    <GlobalProvider>    
      <ComponentA />    
    </GlobalProvider>  
    ); 
}

Получите доступ к данным контекста в дочерних компонентах:

import React, { useContext } from 'react'; 
function ComponentA() {
   const { state, updateUser } = useContext(GlobalContext);
   // Используем useContext для доступа к состоянию  
   
   return (  
     <div>   
        <p>Пользователь: {state.user ? state.user.name : 'Нет данных'}</p>      
        <button onClick={() => updateUser({ name: 'Иван' })}>Обновить пользователя</button>    
     </div>  
   ); 
}

В этом примере ComponentA использует useContext, чтобы получить доступ к глобальному состоянию и функции updateUser. Когда пользователь нажимает кнопку, состояние обновляется, и все компоненты, подписанные на этот контекст, будут перерисованы с новыми данными.

Context API упрощает управление глобальным состоянием, устраняя необходимость в prop drilling