React Typescript с использованием Redux, React Hooks и функционального компонента для получения данных из API

В этой статье рассказывается, как получать данные из API с помощью React Typescript, Redux, React Hooks в функциональном компоненте React

Прежде чем читать эту статью, я предполагаю, что у вас есть некоторые знания о React, Redux, React-Hooks и React. функциональный компонент

давайте начнем, выполнив следующую команду в командной строке, чтобы создать реагирующее приложение с именем my-app

npx create-реагировать-приложение мое-приложение - машинописный текст шаблона

Это создаст ваше реагирующее приложение с именем my-app с поддержкой машинописного текста. Затем в папке my-app выполните следующие команды в командной строке.

npm install @reduxjs/toolkit react-redux
npm install redux

эти команды установят избыточность в вашем приложении

Откройте проект реакции в вашем любимом редакторе кода и запустите команду

запуск нпм

эта команда запустит ваш реактивный проект в порту http://localhost:3000/

После этого создайте папку с именем redux в src/Redux, а затем создайте в ней следующие файлы соответственно.

commentReducer.ts
rootReducer.ts
store.ts

поместите следующий код в соответствующие файлы

комментарийReducer.ts

getCommentsAsync используется для извлечения данных из API, а фрагмент комментариев используется для хранения данных в состоянии массива комментариев.

rootReducer.ts

корневой редюсер — это место, где мы объединяем все редукторы

store.ts

Хранилище — это контейнер состояния, в котором хранится состояние приложения.

После этого перейдите к файлу index.tsx и деформируйте компонент вашего приложения с помощью провайдера и передайте в него свой магазин, как это

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

теперь мы используем это глобальное состояние комментария внутри нашего основного компонента, для этого вам нужно создать папку Main в src/Main, затем создать в ней файл Main.tsx и поместить в него следующий код.

в этом компоненте Main.tsx useSeletor используется для доступа к глобальному состоянию комментария, а useDispatch используется для отправки действия

наконец, импортируйте этот компонент Main.tsx в файл app.tsx и wola ! вы успешно использовали React Typescript, используя Redux, React Hooks и функциональный компонент для получения данных из API

наконец, ваш App.tsx будет выглядеть следующим образом.

полный код проекта доступен здесь