Автор оригинала: FreeCodeCamp Community Member.
Redux представляет собой предсказуемый государственный контейнер для приложений JavaScript. Это популярная библиотека для управления государством в реактивных приложениях.
Redux может предложить лучший опыт разработчика, когда вы используете его вместе с Teadercript. Tymdercript – это SuperSet javaScript, который проверяет код, чтобы сделать его надежным и понятным.
В этом руководстве я покажу вам, как использовать Redux в вашем проекте React ShumeScript, создавая приложение, которое позволяет добавлять, удалять и показывать статьи.
Давайте погрузиться в.
- Предпосылки
- Установка
- Создайте типы
- Создайте типы действий
- Создайте создатели действия
- Создать редуктор
- Создать магазин
- Создайте компоненты
Предпосылки
В этом руководстве предполагается, что у вас есть хотя бы основное понимание реагирования, Redux и Teadercript.
Итак, если вы не знакомы с этими технологиями, сначала попробуйте прочитать это Практическое руководство по тирасу или Это React Redux Учебное пособие Отказ В противном случае давайте начнем.
Настройка проекта
Чтобы использовать redux и tearmcript, нам нужно создать новое приложение raction.
Для этого давайте откроем CLI (интерфейс командной строки) и выполните эту команду:
npx create-react-app my-app --template typescript
Далее давайте структурируем проект следующим образом:
├── src | ├── components | | ├── AddArticle.tsx | | └── Article.tsx | ├── store | | ├── actionCreators.ts | | ├── actionTypes.ts | | └── reducer.ts | ├── type.d.ts | ├── App.test.tsx | ├── App.tsx | ├── index.css | ├── index.tsx | ├── react-app-env.d.ts | └── setupTests.ts ├── tsconfig.json ├── package.json └── yarn.lock
Структура файла проекта довольно проста. Тем не менее, есть две вещи, которые следует отметить:
-
магазин
Папка, которая содержит файлы, связанные с React Redux. -
type.d.ts
Файл, который содержит типы типографии, которые можно использовать сейчас в других файлах без импорта.
Это сказал, теперь мы можем установить Redux и создадим наш самый первый магазин.
Итак, давайте откроем проект и запустите следующую команду:
yarn add redux react-redux redux-thunk
Или при использовании NPM
npm install redux react-redux redux-thunk
Мы также должны установить их типы в качестве зависимостей разработки, чтобы помочь Teamscript понять библиотеки.
Итак, давайте снова выполним эту команду на CLI.
yarn add -D @types/redux @types/react-redux @types/redux-thunk
Или для NPM
:
npm install -D @types/redux @types/react-redux @types/redux-thunk
Большой! С помощью этого шага мы можем теперь создавать типы типов для проекта в следующем разделе.
Создайте типы
Типы Teadercript позволяют устанавливать типы для ваших переменных, параметров функции и т. Д.
- Type.d.ts.
interface IArticle { id: number title: string body: string } type ArticleState = { articles: IArticle[] } type ArticleAction = { type: string article: IArticle } type DispatchType = (args: ArticleAction) => ArticleAction
Здесь мы начинаем с объявления интерфейса IARTICLE
которые отражают форму данной статьи.
Тогда у нас есть Артиклстат
, Артикуация
и Dispatchtype
Это будет служить типами, соответственно, состоятельным объектом, создателям действия и функцию отправки, предоставленной Redux.
Это сказано, теперь у нас есть необходимые типы, чтобы начать использовать React Redux. Давайте создадим типы действий.
Создайте типы действий
- Store/ActionTypes.ts.
export const ADD_ARTICLE = "ADD_ARTICLE" export const REMOVE_ARTICLE = "REMOVE_ARTICLE"
Нам нужны два типа действий для магазина Redux. Один для добавления статей и другого для удаления.
Создайте создатели действия
- Хранить/ActionCreators.ts.
import * as actionTypes from "./actionTypes" export function addArticle(article: IArticle) { const action: ArticleAction = { type: actionTypes.ADD_ARTICLE, article, } return simulateHttpRequest(action) } export function removeArticle(article: IArticle) { const action: ArticleAction = { type: actionTypes.REMOVE_ARTICLE, article, } return simulateHttpRequest(action) } export function simulateHttpRequest(action: ArticleAction) { return (dispatch: DispatchType) => { setTimeout(() => { dispatch(action) }, 500) } }
В этом уроке я смогу имитировать HTTP-запрос, задерживая его в течение 0,5 секунды. Но не стесняйтесь использовать настоящий сервер, если хотите.
Здесь функция Сделачка
отправит действие для добавления новой статьи и метод Removearticle
будет делать обратное. Итак, удалите объект, переданный в качестве аргумента.
Создать редуктор
Редуктор – это чистая функция, которая принимает состояние хранилища и действие в качестве параметров, а затем возвращает обновленное состояние.
- магазин/редуктор
import * as actionTypes from "./actionTypes" const initialState: ArticleState = { articles: [ { id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra Nam libero tempore, cum soluta nobis est eligendi", }, { id: 2, title: "post 2", body: "Harum quidem rerum facilis est et expedita distinctio quas molestias excepturi sint", }, ], }
Как вы можете видеть здесь, мы объявляем первоначальное состояние, чтобы иметь некоторые статьи, чтобы показать, когда страница нагрузки. Государственный объект должен соответствовать типу Артиклстат
– В противном случае TypeScript будет бросать ошибку.
- магазин/редуктор
const reducer = ( state: ArticleState = initialState, action: ArticleAction ): ArticleState => { switch (action.type) { case actionTypes.ADD_ARTICLE: const newArticle: IArticle = { id: Math.random(), // not really unique title: action.article.title, body: action.article.body, } return { ...state, articles: state.articles.concat(newArticle), } case actionTypes.REMOVE_ARTICLE: const updatedArticles: IArticle[] = state.articles.filter( article => article.id !== action.article.id ) return { ...state, articles: updatedArticles, } } return state } export default reducer
Далее у нас есть Редуктор
Функция, которая ожидает предыдущего состояния и действий, чтобы иметь возможность обновить магазин. Здесь у нас есть два действия: один для добавления и другого для удаления.
С этим на месте мы теперь можем обрабатывать состояние с редуктором. Давайте теперь создадим магазин для проекта.
Создать магазин
Магазин Redux – это место, где живет государство вашего приложения.
- index.tsx.
import * as React from "react" import { render } from "react-dom" import { createStore, applyMiddleware, Store } from "redux" import { Provider } from "react-redux" import thunk from "redux-thunk" import App from "./App" import reducer from "./store/reducer" const store: Store& { dispatch: DispatchType } = createStore(reducer, applyMiddleware(thunk)) const rootElement = document.getElementById("root") render( , rootElement )
Как видите, мы импортируем функцию редуктора, а затем пропустите ее в качестве аргумента по методу Createstore
Для того, чтобы создать новый магазин Redux. Redux-Thunk
Промежуточное программное обеспечение должно быть выполнено как второй параметр, а также для способа обрабатывать асинхронный код.
Далее мы подключаемся реагировать на Redux, предоставляя магазин
объект как реквизит к Провайдер
компонент.
Теперь мы можем использовать Redux в этом проекте и доступа к магазину. Итак, давайте создадим компоненты, чтобы получить и манипулировать данными.
Создайте компоненты
- Компоненты/addarticble.tsx.
import * as React from "react" type Props = { saveArticle: (article: IArticle | any) => void } export const AddArticle: React.FC= ({ saveArticle }) => { const [article, setArticle] = React.useState () const handleArticleData = (e: React.FormEvent ) => { setArticle({ ...article, [e.currentTarget.id]: e.currentTarget.value, }) } const addNewArticle = (e: React.FormEvent) => { e.preventDefault() saveArticle(article) } return ( ) }
Чтобы добавить новую статью, мы будем использовать этот компонент формы. Получает функцию Гпроводку
В качестве параметра, который позволяет добавлять новую статью в магазин.
Объект статьи должен соответствовать типу IARTICLE
сделать Teadercript Happy.
- Компоненты/Article.tsx.
import * as React from "react" import { Dispatch } from "redux" import { useDispatch } from "react-redux" type Props = { article: IArticle removeArticle: (article: IArticle) => void } export const Article: React.FC= ({ article, removeArticle }) => { const dispatch: Dispatch = useDispatch() const deleteArticle = React.useCallback( (article: IArticle) => dispatch(removeArticle(article)), [dispatch, removeArticle] ) return ( ) }{article.title}
{article.body}
Статья
Компонент показывает объект статьи.
Функция Removearticle
должен отправить для доступа к магазину и, следовательно, удалить данную статью. Вот почему мы используем Useishissatch
Крючок здесь, который позволяет Redux завершить удаление действий.
Далее, использование UseCallback
Помогает избежать ненужных повторных рендеринга путем памятных значений в качестве зависимостей.
Мы наконец у нас есть компоненты, которые нам нужно добавить и показать статьи. Давайте теперь добавим последнюю часть к загадке, используя их в App.tsx
файл.
- App.tsx.
import * as React from "react" import { useSelector, shallowEqual, useDispatch } from "react-redux" import "./styles.css" import { Article } from "./components/Article" import { AddArticle } from "./components/AddArticle" import { addArticle, removeArticle } from "./store/actionCreators" import { Dispatch } from "redux" const App: React.FC = () => { const articles: readonly IArticle[] = useSelector( (state: ArticleState) => state.articles, shallowEqual ) const dispatch: Dispatch= useDispatch() const saveArticle = React.useCallback( (article: IArticle) => dispatch(addArticle(article)), [dispatch] ) return ( ) } export default App My Articles
{articles.map((article: IArticle) => ( ))}
Isselector
Крюк позволяет доступом к состоянию магазина. Здесь мы проезжаем НОВЫЙКУСКИЙ
В качестве второго аргумента к способу сообщить о неразмерном равенности при проверке изменений.
Далее мы полагаемся на Useishissatch
отправить действие для добавления статей в магазине. Наконец, мы зацикливаемся через массив статей и проезжают каждый к Статья
компонент, чтобы показать это.
С этим мы можем теперь просмотреть корню проекта, а затем выполнить эту команду:
yarn start
Или для NPM
:
npm start
Если вы откроете http://localhost: 3000/
В браузере вы должны увидеть это:
Большой! Наше приложение выглядит хорошо. С этим мы закончили использовать redux в приложении React ShumeScript.
Вы можете найти готовый проект В этом кодовом окне Отказ
Вы можете найти другой отличный контент, как это на мой блог или следовать за мной в твиттере получить уведомление.
Спасибо за чтение.