Автор оригинала: 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 (
    

      
      
      
        Add article
      
    
  )
}

Чтобы добавить новую статью, мы будем использовать этот компонент формы. Получает функцию Гпроводку В качестве параметра, который позволяет добавлять новую статью в магазин.

Объект статьи должен соответствовать типу 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}
      
       deleteArticle(article)}>Delete
    
  )
}

Статья Компонент показывает объект статьи.

Функция 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 (
    

      
My Articles
      
      {articles.map((article: IArticle) => (
        

      ))}
    
  )
}

export default App

Isselector Крюк позволяет доступом к состоянию магазина. Здесь мы проезжаем НОВЫЙКУСКИЙ В качестве второго аргумента к способу сообщить о неразмерном равенности при проверке изменений.

Далее мы полагаемся на Useishissatch отправить действие для добавления статей в магазине. Наконец, мы зацикливаемся через массив статей и проезжают каждый к Статья компонент, чтобы показать это.

С этим мы можем теперь просмотреть корню проекта, а затем выполнить эту команду:

  yarn start

Или для NPM :

  npm start

Если вы откроете http://localhost: 3000/ В браузере вы должны увидеть это:

Большой! Наше приложение выглядит хорошо. С этим мы закончили использовать redux в приложении React ShumeScript.

Вы можете найти готовый проект В этом кодовом окне Отказ

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

Спасибо за чтение.