React Redux — это вещь прошлого после появления Context API.

Для всех react-redux, давайте разберемся, что такое контекстный хук, предоставляемый React. Строго технический момент.

React-Redux стал динозавром для разработки фронтенда. Большинство приложений/организаций, которые используют библиотеку React JS для своих фронтенд-разработчиков, используют Redux для управления состояниями. До появления контекстных хуков, если бы мы спросили кого-нибудь о разработчике сложного React-приложения без использования какого-либо инструмента управления состоянием, это было бы чем-то вроде забавного момента для пунша.

Table of content
· Basic Introduction
· Let's create the counterpart using useContext.
  ∘ 1. Create a Basic folder structure.
  ∘ 2. Adding createContext.
  ∘ 3. Adding React Context Provider
  ∘ 4. Wrapping the child components
  ∘ 5. Creating Consumer.
  ∘ 6. Expected Result
  ∘ 7. Start the application
· React Context Provider vs Consumer
· Redux vs Context API
· Closing Thoughts.
· About The Author

Основное введение

Redux можно назвать самой используемой библиотекой для управления состояниями. Теперь для соединения Redux с нашим React JS приложением, мы должны использовать некоторое промежуточное ПО, такое как React saga или React thunk. Это промежуточное ПО помогает в реализации бизнес-логики, вызовов API и обновлении редуктора на основе условия.
Итак, для всех тех, кто не работал с редуктором, это просто глобальное хранилище, которое считается единым источником истины. Всегда есть процесс обновления состояния, то есть диспетчеризация действия из компонента. Более того, нам приходится использовать другой модуль, react-redux, для соединения нашего ReactJS-компонента с хранилищем redux.
Все это увеличивает размер пакета приложения React JS. Размер пакета — это то, что мы всегда стараемся уменьшить. Рассмотрим сценарий, в котором нам не придется использовать все эти библиотеки. В зонтичных терминах, мы избавимся примерно от 3 основных модулей, таких как redux, react-redux, react-thunk и т.д.
Эти модули/библиотеки являются сверхмощными, а не обычными библиотеками. Поэтому заставить систему работать без использования всех этих вещей кажется еще одним вариантом. Команда React представила контекст как альтернативный способ передачи значения от родителя к ребенку. Вместо того чтобы передавать реквизиты вложенным дочерним элементам с помощью prop drilling, мы будем напрямую передавать данные, сохраняя контекст текущего состояния.
Давайте обновим пример приложения, которое ранее было написано с использованием react-redux, и попробуем преобразовать его с помощью useContext. В этом учебнике мы не будем рассматривать часть, связанную с react-redux, так как это выходит за рамки учебника.
Но если вы заинтересованы в изучении react saga, созданного с помощью redux, вы можете обратиться к этой серии уроков, которая поможет вам понять то же самое. Нажмите здесь.

Давайте создадим аналог с помощью useContext.

1. Создайте базовую структуру папок.

Для начала мы создадим папку context, которая будет содержать весь код, связанный с различными видами контекстов, которые мы будем создавать.

Внутри папки мы создадим два файла с именами globalContext.js и globalState.js. Оба файла будут оберткой нашего глобального контекста. Мы будем импортировать глобальный контекст из и в каждый компонент, с которым мы хотим напрямую обмениваться данными.

2. Добавляем createContext.

Давайте погрузимся в файл global context.js. Ниже приведен код, не стесняйтесь копировать и пробовать.

// context/globalContext.js
import {createContext} from 'react';
const GlobalContext = createContext();
export default GlobalContext;

Этот файл — не что иное, как создание контекста с именем global context. Который будет предоставлять значение подкомпонентов. 

3. Добавление провайдера контекста React

Еще один файл — это наш файл провайдера, который будет хранить состояние контекста, которое будет передаваться другим компонентам.

// context/globalState.js
import { useState } from "react";
import GlobalContext from "./globalContext";
const GlobalState = (props)=>{
const [title, setTitle] = useState('This from Context')
return(
        <GlobalContext.Provider value={{title, setTitle}}>
            {props.children}
        </GlobalContext.Provider>
);
}
export default GlobalState;

В файле глобального состояния мы использовали провайдер globalContext и передали значение вниз по потоку. 
Мы также использовали хук useState, который имеет начальное значение ‘ This from context’. и метод setTitle, который будет использоваться для обновления состояния из дочернего компонента. Точно так же, как обычная функция родитель-ребенок, передающая реквизиты для обновления значения родительского компонента. 

4. Обертывание дочерних компонентов

Теперь необходимо передать значение вниз по потоку, поэтому нам нужно обернуть дочерний компонент в глобальный компонент состояния. 
Это мы сделаем внутри нашего файла App.js.

// App.js
import './App.css';
./container/FunctionBasedComponent';
import FunctionBasedContextComponent from './container/FunctionBasedContextComponent';
import GlobalState from './context/globalState';
function App() {
return (
    <div className="App">
        <GlobalState>
            <FunctionBasedContextComponent />
        </GlobalState>
    </div>
 );
}
export default App;

Итак, мы импортировали наше глобальное состояние и обернули все подкомпоненты, которым могут потребоваться данные. Поскольку мы создали его как глобальный контекст, мы обернули все компоненты под состояние, но мы можем сделать это и на более детальном уровне. 
Так что решайте сами, что вам больше подходит для данного приложения. 

5. Создание потребителя.

Последний шаг — создание компонента, который будет использовать это глобальное состояние, как и в любом приложении react redux. Обычно мы используем метод connect, предоставляемый библиотекой react-redux в случае Redux, но здесь мы будем использовать API потребителя, предоставляемый React context API.

// container/FunctionBasedContextComponent.js
import React, { useEffect, useContext } from 'react';
import GlobalContext from '../context/globalContext';
function FunctionBasedContextComponent(props) {
const {title, setTitle} = useContext(GlobalContext);
useEffect(() => {
    setTimeout(() => {
        setTitle('Title updated after 4 Seconds of timeout.')
    }, 4000);
}, []);
return <h1>{title}</h1>;
}
export default FunctionBasedContextComponent;

Здесь, внутри этого функционального компонента, мы не делаем ничего вычурного, но используем хук useContext для импорта значения, предоставленного глобальным контекстом.
Мы можем уничтожить значение, заголовок здесь был состоянием out, а setTitle был методом, который может быть использован для обновления значения состояния заголовка.

6. Ожидаемый результат

Также мы использовали хук useEffect, который обновит значение заголовка после истечения 4 секунд до »Заголовок обновляется после 4 секунд таймаута.» из ‘This from Context’.

7. Запустите приложение

Теперь мы готовы к реализации и запускаем код. Просто выполните следующие команды.

> npm install.
> npm start

Мы увидим нечто подобное тому, что показано ниже.

React Context Provider vs Consumer

Провайдер контекста — это способ предоставления состояния контекста. Он хранит значение, которое может быть использовано для детализации значения до нужного компонента. Когда любой компонент обернут внутри провайдера, мы можем работать с контекстом. 
С другой стороны, потребитель, как следует из названия, используется для потребления контекста. Значения, предоставленные провайдером, могут быть использованы во вложенном дочернем компоненте без какого-либо сверления.
Обычно существует два способа потребления контекста. Один из способов использует useContext, который мы обычно обсуждали в вышеупомянутом руководстве. useContext обычно используется, когда есть более одного потребителя, который потребитель должен потреблять.

const {title, setTitle} = useContext(GlobalContext);

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

<GlobalContext.Consumer>
    {value => { }}
</GlobalContext.Consumer>

Redux vs Context API

Redux широко принят в индустрии, так как многие организации уже используют его. Структура кода приложения Redux слишком аккуратна. Все конкретные вещи находятся на своих местах. Например, у вас есть действие, асинхронные действия, редукторы и т.д.
Но, напротив, контекстный API имеет очень мало зависимостей. Вам не нужно полагаться на внешние пакеты, чтобы ваше приложение работало. Если вы сможете взломать код идеальной архитектуры с помощью Context API, я назову это беспроигрышной ситуацией. Размер пакета уменьшится, поскольку нам не придется создавать настройки, как в Redux.
В остальном, нет ничего, чего нельзя было бы достичь, используя любой из них. Кроме того, у контекстного API нет расширения для браузера, как у Redux, а это очень помогает при отладке решения. 

Заключительные мысли.
Контекстные API React — это новое дополнение к экосистеме React. Они приживаются в системе, но еще не так распространены по сравнению с двумя Redux.
Хотя Redux требует немного сложной реализации, проект становится гладким после базовой настройки. Нам не нужно слишком много рефакторинга после этого. Просто добавьте условие, и все пойдет своим чередом. Redux хорошо подходит для больших сложных приложений. 
Context API можно назвать готовым решением, а Redux можно определить как сильный инструмент управления состоянием.

Ссылка на Github

Исходный код

Видеоурок

React Context API. Сравнение с React Redux.

Об авторе

Апурв Томар — разработчик программного обеспечения и сотрудник Mindroast. Вы можете связаться с ним в Twitter, Linkedin, Telegram и Instagram. Подпишитесь на рассылку новостей, чтобы получать самые свежие материалы. Не стесняйтесь сказать «Привет» на любой платформе, просто указав ссылку, где вы нашли мой профильНа любой платформе, просто указав ссылку, где вы нашли мой профиль