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

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

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

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

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

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

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.

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

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

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

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