Централизованно управляйте состояниями React с помощью Context

Хук контекста React может помочь упростить ситуацию с «цепочкой реквизитов», когда у нас есть межкомпонентные состояния, и нам нужно передать их с помощью реквизитов через несколько слоев компонентов, фактически не нуждаясь в них по пути.

Взгляните на этот App компонент, который имеет userName

const App = () => {
  
  const userName = ...
  return (
    <>
      <Home userName = userName />
      ...
    </>
  );
}

В компоненте Home, которому на самом деле не нужен userName, но у него есть дочерний компонент Form, которому требуется userName. В этом случае компонент Home должен получить userName из реквизита и передать его Form, что может быть излишним и запутанным.

const Home = (props) => {
  return (
    <>
      <Form userName = props.userName />
      ...
    </>
  );
}

Как контекст может помочь

Контекст React помогает управлять межкомпонентными состояниями, имея централизованное место для управления состоянием и избегая цепочки реквизитов.

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

Создайте файл контекста в своем проекте по предпочтительному пути, например, src/store/user-context.js. Обратите внимание, что я назвал файл user-context, так как в нем будут храниться пользовательские данные.

import React from "react";
const UserContext = React.createContext({
  name: ""
});
export default UserContext;

Шаг 2: Создайте производителя контекста

Я буду использовать тот же пример, что и выше. Мы хотели бы передать userName из компонента App в компонент Form. С провайдером контекста вам нужно только передать userName UserContext для использования в любом месте.

const App = () => {
  
  const[userName, setUserName] = setState(); 
  ...
  return (
    <UserContext.provider value={
        {name: userName}
    }>
      <Home />
      ...
    </UserContext.provider>
  );
}

Шаг 3: Создайте потребителя контекста

В компоненте Form, где мы хотим использовать userName (не хранится как name в UserContext), создайте переменную с хуком useContext(), как в примере, и получите прямой доступ к любому сохраненному значению.

const Form = () => {
  
  const userCtx = useContext(UserContext);  
  ...
  return (
    <>
      <div>Hello {userCtx.name}</div>
      ...   
    </>
  );
}

Контекст React — это один из способов централизованного управления состояниями в вашем приложении. Однако это не окончательное решение. Если ваше приложение очень сложное, содержит много контекста или много изменений состояния, вы также можете рассмотреть реагирование с редукцией.