Понимание Context Api + хуки UseReducer

Контекст React Api стал официальным в версии 16.3 реакции. Это API, который был введен для решения распространенной проблемы, известной как сверление свойств в реакции. Context предоставляет способ передачи данных через дерево компонентов без необходимость передавать реквизит вручную на каждом уровне. React context API был вдохновлен популярными библиотеками управления состоянием, такими как Redux и т. д.

Давайте рассмотрим, как мы будем использовать React Context API

Чтобы создать контекст, мы используем ключевое слово createContext из реакции, метод createContext возвращает компоненты provider и consumer.

import React,{createContext} from 'react';
const newContext = createContext(color: 'blue')
const { Provider, Consumer } = newContext;

Компонент-поставщик делает состояние доступным для всех дочерних компонентов, независимо от того, насколько глубоко они вложены, обертывая индексный файл или корневой компонент. Он принимает свойство value, которое используется для передачи текущих данных или состояния.

<Provider value={color: 'blue'}>
  {children}
</Provider>

использоватьконтекст

Хуки useContext помогают использовать API createContext, он принимает объект контекста (значение, возвращаемое из React.createContext) и возвращает текущее значение контекста для этого контекста.

import React,{createContext} from 'react';
const newContext = createContext(color: 'blue')
function Index() {
  return (
    <newContext.Provider value={color: 'blue'}>
      <App />
    </newContext.Provider>
  );
}

function App(props) {
  return (
    <div>
      <ShowColor />
    </div>
  );
}

function ShowColor() {
  const color = useContext(newContext) 
  return (
   <h1>{color} </h1>
  )
}

Из приведенного выше фрагмента кода у нас есть три основных компонента: первый компонент Index; — это корневой компонент, который принимает другие компоненты в качестве дочерних. Именно здесь мы используем поставщика для предоставления данных и состояния для всего приложения. Компонент App является оберткой для компонента ShowColor, который является компонентом, который мы использовали для обработки данных с помощью хука useContext.

Хуки UseReducer

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

Для работы useReducer требуется три основные части:

• Действие
• Редуктор и
• Состояние

Редюсер принимает props(state, action) => newStateи возвращает текущее состояние в паре с методом dispatch. Редуктор — это функция, которая реализует поведение действия, они берут свое текущее состояние для выполнения действия и возвращают новое состояние.

Действие: это объект, который отправляет данные в состояние. Обычно они имеют два свойства: свойство типа для описания того, что делает действие, и свойство полезной нагрузки, которое содержит информацию, которая должна быть изменена в состоянии приложения.

Государство — наш единственный источник истины. Он содержит текущий снимок состояния наших приложений в любой момент времени. Вот пример приложения-счетчика, использующего useReducer.

Вот пример использования useReducer + context API

Это должно помочь вам начать свой путь обучения. Поделитесь своими комментариями ниже.