Здесь мы изучим React и Redux, а также будем кодировать проект в процессе обучения. Перед запуском проекта нам необходимо настроить необходимые пакеты для установки и настройки.

Создайте приложение для реагирования с помощью команды npx create-react-app <Your APP NAME>
, а также нам понадобятся еще два пакета 👇
1. Axios (npm install axios) - ›для вызова API и
2. React Router Dom (npm install react-router-dom) -› для маршрутизации в приложении.

Теперь измените каталог на приложение для реагирования и запустите npm start в терминале, и ваше первое приложение для реагирования готово🎉

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

Блог в основном сосредоточен на реакции и сокращении, поэтому я использую семантический пользовательский интерфейс вместо написания собственного CSS.

Чтобы добавить redux в проект, нам сначала нужно установить некоторые зависимости для redux, поэтому нам нужно будет установить response и redux npm install redux react-redux, которые дают нам некоторые хуки для подключения из реакции

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

Создайте папку с именем контейнеров, и эти папки будут содержать все наши компоненты и еще одну папку redux, которая содержит все наши файлы, связанные с redux, и внутри этой папки redux мы собираемся создавать действия, константы, редукторы и один файл store.Js.
Создайте файл action-typer.js внутри констант, который будет содержать все типы действий. давайте создадим действия. Действие - это объект, поэтому я создам эти типы действий. Первым будет набор продуктов, и всегда лучшее соглашение об именах для добавления типов действий заключается в том, что вы всегда используете его в верхнем регистре, поэтому другой будет выбранным продуктом, поэтому всякий раз, когда мы нажимаем на любой из продуктов, чтобы получить детали и последний - это продукт для удаления, поэтому я объясню вам, почему у нас есть последний продукт для удаления, поэтому давайте сначала создадим его.

Теперь у нас есть типы действий, так что теперь давайте создадим действия внутри файла productActions.js. Мне нужно создать три действия: одно для установленного продукта, второе для выбранного продукта и последнее для удаления продукта.

Мы создадим 3-е действие, когда оно нам понадобится. Теперь перейдем к редуктору и создадим index.js и productReducer.js, чтобы редуктор всегда принимал начальное состояние и действие, поэтому давайте сначала создадим редуктор.

Теперь мы переходим к redurs / index.js, поэтому при создании приложения у вас будет несколько редукторов, поэтому мы собираемся объединить все эти редукторы в этом index.js.

Итак, теперь мы также создали редуктор, и мы также объединили редуктор, теперь пришло время создать хранилище.

мы успешно создали хранилище, но прямо сейчас оно не подключено к приложению реакции, поэтому для подключения его к приложению реакции перейдите к основному index.js и поставщику импорта, который предоставляет хранилище redux для нашего приложения реакции.

Наше приложение успешно подключено к магазину redux прямо сейчас наши продукты содержат только один продукт, который мы добавили, поэтому теперь, если мы хотим получить доступ к этому продукту в наших компонентах, как мы можем это сделать?
Переходим в приложение, теперь мы собираемся создать некоторые компоненты внутри контейнеров - Headers.js, productDetail.js, productComponent.js, productList.js
Итак, давайте быстро напишем заголовок внутри header.js

Теперь просто импортируйте заголовок в App.js

Итак, следующее, что мы собираемся сделать, это выпустить наш продукт Comp.

Хорошо, теперь у нас есть все компоненты, и теперь давайте добавим их в наш app.js, поэтому мы собираемся сделать маршрутизацию, поэтому для маршрутизации, которая нам нужна, мы уже установили пакет, поэтому я собираюсь добавить маршрутизатор браузера как роутер.

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

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

Теперь мы добавим немного CSS, а затем продолжим работу с приложением.

Импортируйте ProductComponent.js в ProductListing.js и замените его тегом h1.
Итак, мы достигли этого.

Теперь нам нужны некоторые данные псевдо-магазина, для этого мы будем использовать Fake Store API, который предоставит нам фактические продукты из API. для вызовов API мы сделаем аксиомы.
Вот ссылка для получения всех продуктов: https://fakestoreapi.com/products

Теперь productListing.js выглядит так:

Мы создали функцию для получения продуктов и консоли, чтобы проверить, работает ли вызов API. мы вызываем функцию с useEffect. в основном Effect Hook позволяет выполнять побочные эффекты в функциональных компонентах. Если вы знакомы с методами жизненного цикла класса React, вы можете думать о useEffect Hook как о componentDidMount, componentDidUpdate и componentWillUnmount вместе взятых.
Мы получить все данные из API, теперь мы должны добавить их в магазин (отправить действие, и наше действие - это установленный продукт) Для отправки у нас есть отправка обработчика реагирования

В строке 19: мы передаем продукты в нашем действии, что должно произойти, оно перейдет к действию и вернет объект

и этот объект будет взят редуктором. reducer получит тип и полезную нагрузку, и мы вернем новое состояние.

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

Теперь нам нужно, когда мы нажимаем на любой из продуктов, нам нужно перейти на страницу сведений о продукте, поэтому мы собираемся добавить сюда тег ссылки. В productComponent.js import {Link} from 'react-router-dom верните тег со ссылкой, например <Link to={`/product/${id}`}>, и закройте его. Теперь мы можем перейти на одну страницу продукта, поэтому нам нужно взять этот параметр product id, а затем нам нужно сделать еще один вызов API, чтобы получить единственный продукт.
Ссылка: https: //fakestoreapi.com/products/1
Чтобы получить значение параметра, мы можем использовать хук use param.

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

и назовите это в редукторах

Теперь вы видите данные о продукте в консоли следующим образом:

Теперь у нас есть доступ к выбранному продукту, и теперь нам просто нужно отобразить данные.

Если вы дойдете сюда и запустите код. Все в порядке, но когда вы переключаетесь с одного продукта на другой, вы заметите, что есть проблема: сначала мы видим старый продукт, а затем он обновляется до нового, и мы можем исправить это, чтобы мы могли сделать мы можем выполнить очистку, поэтому всякий раз, когда компонент будет уничтожен, мы собираемся удалить выбранный продукт, который является допустимым, нам нужно удалять выбранный продукт всякий раз, когда компонент уничтожается. Итак, что мы сделаем, давайте создадим тип действия для удаления выбранного продукта.

Создайте действие для удаления выбранных пар.

создать корпус переключателя для удаления выбранных продуктов.

В ProductDetail.js нам просто нужно произвести чистку:

Весь код этого руководства доступен в моем репозитории GitHub.
🎁 https://github.com/CS-Aditya-Rawat/React-and-redux

🌐Живая демонстрация веб-сайта: https://react-and-redux-1.herokuapp.com/

Бонусный балл:

Вы можете использовать инструменты разработчика Redux в расширении chrome, которые помогут вам хорошо понять состояние редукции.

h ttps: //chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd