Текст книги "React и TypeScript: Практическое руководство. Быстрый старт"

Promises (обещания) – это популярный механизм в JavaScript для работы с асинхронными операциями. Они предоставляют удобный способ управления асинхронным кодом и обработки результатов асинхронных операций.

Основные понятия и принципы работы Promises:

– Состояния Promise:

– Pending (ожидание). Исходное состояние обещания, когда асинхронная операция ещё не завершена.

– Fulfilled (выполнено). Состояние, когда асинхронная операция завершилась успешно, и результат доступен.

– Rejected (отклонено). Состояние, когда асинхронная операция завершилась с ошибкой, и доступен объект ошибки.

– Создание Promise.

Для создания Promise используется конструктор Promise, который принимает функцию (executor) с двумя аргументами: resolve и reject. При этом: resolve вызывается для выполнения обещания, а reject для его отклонения.

Пример создания Promise:

 
const myPromise = new Promise ((resolve, reject) => {
  // Асинхронный код
  if (успешное завершение) {
    resolve («Успех!»)
} else {
    reject («Ошибка!»)
 

}

})

– Обработка результатов Promise.

Для обработки результатов асинхронных операций с Promise используются методы then и catch.

Метод then принимает две функции обратного вызова: одну для успешного выполнения (resolve), другую для ошибки (reject). Этот метод позволяет коду выполняться после завершения Promise, как успешного, так и с ошибкой

Метод catch используется для обработки ошибок, и он является альтернативой функции then для обработки только ошибок, возникших при выполнении Promise.

Пример обработки Promise:

 
myPromise
.then ((result) => {
 
 
    console. log («Успешное выполнение:», result);
})
.catch ((error) => {
console.error («Ошибка:», error)
 

})

– Цепочки обещаний (Promise chaining).

Один из главных преимуществ Promises – это возможность создавать цепочки обещаний, что делает код более читаемым и управляемым при выполнении нескольких асинхронных операций.

Пример цепочки обещаний:

 
fetch (»https://api.example.com/data")
.then ((response) => response. json ())
.then ((data) => {
    // Обработка полученных данных
})
.catch ((error) => {
console.error («Ошибка:», error)
 

});

– Promise.all и Promise. race.

Promise.all используется для выполнения нескольких обещаний параллельно и ожидает, пока все они завершатся. Promise. race ожидает только первое обещание из списка, которое завершится (будь то успешно или с ошибкой).

Примеры:

 
const promises = [promise1, promise2, promise3]
Promise.all (promises)
.then ((results) => {
    // Обработка результатов всех обещаний
})
.catch ((error) => {
console.error («Ошибка:», error)
});
 
 
const promises = [promise1, promise2, promise3];
Promise. race (promises)
.then ((result) => {
    // Обработка первого завершившегося обещания
})
.catch ((error) => {
console.error («Ошибка:», error)
 

});

Promises упрощают управление асинхронным кодом и делают его более читаемым и надежным. Они являются важной частью современных языков программирования, таких как JavaScript и TypeScript, и широко используются во многих библиотеках и фреймворках, включая React, Angular и Node. js. Promises помогают разработчикам управлять асинхронными операциями, такими как: загрузка данных из сети, выполнение запросов к серверу, анимации и т. д.

Основные преимущества и характеристики Promises:

– Параллельная и последовательная обработка. Promises позволяют разработчикам выбирать, нужно ли выполнять асинхронные операции параллельно или последовательно. Это делает возможным эффективное использование ресурсов и оптимизацию производительности.

– Удобство и читаемость кода. Использование цепочек обещаний и методов then и catch делает код более структурированным и понятным. Он легче поддерживать и отлаживать.

– Обработка ошибок. Promises предоставляют механизм для обработки ошибок в асинхронном коде с помощью метода catch. Это позволяет точно локализовать и обрабатывать проблемы, возникающие в процессе выполнения асинхронных операций.

– Поддержка асинхронных операций в браузере. Promises широко поддерживаются в современных браузерах, что делает их идеальным инструментом для работы с веб-приложениями.

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

Таким образом, Promises предоставляют удобный способ управления асинхронными операциями и снижают уровень вложенности асинхронных вызовов, делая код более читаемым и управляемым.

– async/await

async/await – это конструкции в JavaScript, предназначенные для управления асинхронными операциями. async объявляет асинхронную функцию, которая возвращает промис, и позволяет использовать оператор await внутри этой функции для приостановки выполнения кода до тех пор, пока промис не будет разрешен или отклонен. Это делает асинхронный код более легким для чтения и написания, поскольку он выглядит подобно синхронному коду, даже если выполняет асинхронные операции.

Иначе говоря, async/await позволяют писать асинхронный код так, как будто он синхронный, делая его более понятным и управляемым.

Пример запросов к серверу при помощи асинхронных функций :

 
async function fetchData () {
  const response = await fetch (»https://api.example.com/data')
  const data = await response. json ()
  return data
 

}

В этом примере: Функция fetchData отправляет запрос к серверу. Когда ответ приходит, функция ожидает (с помощью await) этот ответ и сохраняет его. Затем полученные данные обрабатываются в формате JSON, и после этого функция возвращает эти данные для использования в других частях кода.

– Управление состоянием загрузки

Управление состоянием загрузки в React позволяет отслеживать процесс загрузки данных в приложении. Обычно для этого используется состояние isLoading, которое устанавливается в true во время загрузки данных и возвращается в false после завершения операции. Это позволяет корректно отображать пользовательский интерфейс во время загрузки данных, например, отображать индикатор загрузки или скрывать определенные компоненты, пока данные не будут загружены и готовы к отображению.

Также для этой цели можно использовать хук useState, который позволяет создавать и управлять состоянием в функциональных компонентах.

Например:

import React, {useState, useEffect} from ’react’

function YourComponent () {

const [isLoading, setIsLoading] = useState (false)

useEffect (() => {

// код загрузки данных

setIsLoading (true) // Устанавливаем isLoading в true перед началом загрузки данных

// Пример асинхронной операции загрузки данных (setTimeout используется для имитации запроса к серверу)

setTimeout (() => {

// логика загрузки данных

setIsLoading (false) // Устанавливаем isLoading в false после завершения загрузки данных

}, 2000) // Имитация задержки загрузки в 2 секунды

}, []) // Пустой массив зависимостей для useEffect для выполнения однократной загрузки при монтировании компонента

 
  return (
    <div>
      {isLoading? <p> Loading… </p>: <p> Data Loaded </p>}
      {/* Отображение различных компонентов в зависимости от состояния isLoading */}
    </div>
 

)

}

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

Например, предположим, что у нас есть компонент, который имитирует загрузку данных с помощью setTimeout. После окончания имитации, данные обновляются в состоянии компонента, и они могут быть использованы для отображения на веб-странице:

 
import React, {useState, useEffect} from ’react’
 
 
function YourComponent () {
  const [isLoading, setIsLoading] = useState (false)
  const [data, setData] = useState (null) // Создаем состояние для данных
 
 
  useEffect (() => {
    setIsLoading (true)
 
 
    setTimeout (() => {
      // Логика загрузки данных
      const fakeData = «Some data» // Имитация получение данных
 
 
      setData (fakeData) // Обновление состояния данных после успешной
загрузки
      setIsLoading (false)
}, 2000)
}, [])
 
 
  return (
    <div>
      {isLoading? <p> Loading… </p>: <p> {data} </p>}
    </div>
 

)

}

Асинхронное программирование является неотъемлемой частью веб-разработки, а инструменты, предоставляемые React в сочетании с TypeScript, открывают широкие возможности для работы с этой концепцией. Promises, async/await и другие подходы существенно улучшают структуру кода, сделав его более понятным и легко поддерживаемым. Они обеспечивают эффективное управление асинхронными задачами, позволяют обрабатывать ошибки и создавать реактивные и мощные приложения, готовые к быстрому отклику на запросы пользователей. Такие инструменты не только улучшают процесс разработки, но и повышают качество и функциональность конечного продукта.

В последующих разделах мы рассмотрим ряд библиотек, призванных улучшить и оптимизировать работу с данными в React-приложениях.

Глава 4. Использование библиотек для упрощения работы с данными

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

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

Популярные библиотеки для работы с данными в React-приложениях с использованием TypeScript:

– Redux. Предоставляет прогнозируемое управление состоянием приложения и упрощает управление данными.

– MobX. Обеспечивает простоту и мощность при управлении состоянием приложения.

– Axios. Удобная библиотека для работы с HTTP-запросами, обеспечивающая простой интерфейс и возможности для отправки и обработки запросов.

– React Query. Библиотека для управления состоянием удаленных данных в React, предоставляющая простые и эффективные средства для запросов и кэширования данных.

Redux – это библиотека управления состоянием (state management) в приложениях на языке JavaScript, часто используемая в сочетании с библиотекой React, но применимая и в других экосистемах3131
  В программировании термин «экосистема» обычно используется для описания совокупности взаимосвязанных инструментов, библиотек, фреймворков и ресурсов, которые работают вместе для поддержки разработки программного обеспечения.


[Закрыть]. Основная цель Redux – облегчить управление и синхронизацию состояния приложения, делая его более предсказуемым и управляемым.

Основные принципы и компоненты Redux:

– Хранилище (Store). Центральное место для хранения данных всего приложения в виде JavaScript-объекта.

– Действия (Actions). Описывают события, произошедшие в приложении, и передают информацию для обновления данных в хранилище.

– Редьюсеры (Reducers). Функции, которые обрабатывают действия и определяют, как изменяется состояние приложения.

– Синглтон (Single Source of Truth). Один источник данных, где хранится вся информация приложения, что делает управление данными более организованным.

– Изменения через действия. Состояние в Redux изменяется только путем отправки действий, что обеспечивает прозрачность и управляемость изменениями.

– Инструменты разработчика. Предоставляют возможность отслеживать состояние приложения, воспроизводить действия и упрощать отладку в процессе разработки.

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

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

Для установки Redux в проект:

npm install redux react-redux

Пример счетчика с использованием Redux:

 
// файл actions. js
export const increment = () => {
  return {
    type: «INCREMENT»
}
}
 
 
export const decrement = () => {
  return {
    type: «DECREMENT»
}
}
 
 
// файл reducers. js
const counterReducer = (state = 0, action) => {
  switch (action. type) {
    case «INCREMENT»:
      return state +1
    case «DECREMENT»:
      return state – 1
    default:
      return state
}
}
 
 
export default counterReducer
 
 
// файл store. js
import {createStore} from ’redux’
import counterReducer from». /reducers’
 
 
const store = createStore (counterReducer)
 
 
export default store
 
 
// Использование Redux в компоненте
import React from ’react’
import {useSelector, useDispatch} from ’react-redux’
import {increment, decrement} from». /actions’
 
 
const Counter = () => {
  const count = useSelector (state => state);
  const dispatch = useDispatch ()
 
 
  return (
    <div>
      <h1> Counter: {count} </h1>
      <button onClick= {() => dispatch (increment ())}> + </button>
      <button onClick= {() => dispatch (decrement ())}> – </button>
    </div>
)
}
 
 
export default Counter
 

MobX – это библиотека управления состоянием, которая облегчает реактивное программирование в JavaScript-приложениях. Она предоставляет инструменты для создания и обновления состояния таким образом, чтобы изменения автоматически отслеживались и обновлялись в компонентах, использующих это состояние.

Основные концепции MobX:

– Наблюдаемые значения (Observable). В MobX для отслеживания изменений используются наблюдаемые значения. Это могут быть объекты, массивы или примитивы, помеченные как наблюдаемые с помощью декораторов или функций.

– Реактивные зависимости (Computed). MobX позволяет создавать вычисляемые значения, которые автоматически пересчитываются при изменении используемых в них наблюдаемых данных. Такие вычисляемые значения могут быть зависимы от других данных и обновляться при изменениях в них.

– Действия (Actions). Это функции, которые изменяют состояние наблюдаемых значений. Обычно действия используются для модификации данных и предоставляют гарантии, что изменения произойдут в одной транзакции.

– Реакция (Reactions). Это способ автоматической реакции на изменения наблюдаемых данных. Реакции могут быть использованы для запуска побочных эффектов, обновления интерфейса и т. д.

– Использование в React. MobX может использоваться с React для управления состоянием компонентов. При изменении данных, связанных с компонентом, он автоматически перерендерится.

Для загрузки MobX:

npm install mobx mobx-react

Пример использования Mobx для простого счетчика:

 
import {observable, action, makeObservable} from ’mobx’
import {observer} from ’mobx-react’
import React from ’react’
 
 
class CounterStore {
  count = 0
 
 
  constructor () {
    makeObservable (this, {
      count: observable,
      increment: action,
      decrement: action,
})
}
 
 
  increment () {
this.count++;
}
 
 
  decrement () {
this.count – ;
}
}
 
 
const counterStore = new CounterStore ();
 
 
const Counter = observer (() => {
  const handleIncrement = () => {
counterStore.increment ()
};
 
 
  const handleDecrement = () => {
counterStore.decrement ()
};
 
 
  return (
    <div>
      <h2> Count: {counterStore.count} </h2>
      <button onClick= {handleIncrement}> Increment </button>
      <button onClick= {handleDecrement}> Decrement </button>
    </div>
)
})
 
 
export default Counter
 

В этом примере создается хранилище CounterStore с переменной count и методами increment и decrement для изменения этой переменной. Затем компонент Counter использует observer из mobx-react, чтобы следить за изменениями переменной count и автоматически перерисовываться при ее изменении.

Axios – это библиотека для работы с HTTP-запросами в JavaScript и TypeScript. Она предоставляет удобный интерфейс для создания и отправки запросов на сервер и обработки полученных ответов. Наиболее распространенное использование Axios – это выполнение запросов к API для получения данных, отправки данных на сервер или выполнения других операций, требующих взаимодействия с внешними ресурсами.

Установка Axios: npm install axios

Особенности Axios:

– Простота использования. Axios предоставляет простой и понятный интерфейс для отправки запросов и обработки ответов, что упрощает взаимодействие с API.

– Поддержка обещаний. Axios основан на обещаниях (Promises), что позволяет писать чистый и удобный асинхронный код.

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

– Поддержка отмены запросов. Axios предоставляет функционал отмены запросов, что полезно при необходимости прервать выполнение запроса.

Пример использования Axios для выполнения GET-запроса:

 
import axios from ’axios’
 
 
axios.get (»https://api.example.com/data')
.then (response => {
    // Обработка успешного ответа
    console. log («Данные:», response. data);
})
.catch (error => {
    // Обработка ошибки
console.error («Ошибка загрузки данных:», error)
 

});

React Query – это библиотека для управления состоянием удаленных данных в React-приложениях. Она предоставляет простые и эффективные средства для выполнения запросов к серверу, управления кэшированием данных и автоматической обработки запросов, включая повторы запросов при их неудаче или автоматическое обновление данных.

Установка React Query: npm install react-query

Особенности React Query:

– Кэширование данных. React Query автоматически кэширует данные, полученные в результате запросов. Это позволяет быстро и легко управлять локальным состоянием данных и оптимизировать их использование без лишних запросов на сервер.

– Автоматическое обновление данных. Библиотека предоставляет возможность автоматически обновлять данные в фоновом режиме с учетом их устаревания или изменений на сервере.

– Оптимизация запросов. React Query позволяет оптимизировать выполнение запросов, выполняя их повторно только при необходимости или при изменении зависимостей.

– Управление состоянием. Она предоставляет хуки и функции для управления состоянием данных в компонентах React, что упрощает их использование и интеграцию с уже существующим кодом.

– Обработка ошибок. React Query предоставляет удобные средства для обработки ошибок при выполнении запросов и автоматического повтора запросов при их возникновении.

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

Redux предпочтителен для централизованного управления состоянием, MobX предлагает более гибкий подход, а Axios и React Query эффективно обрабатывают сетевые запросы и кэшируют данные. Выбор определенной библиотеки зависит от конкретных потребностей проекта, и каждая из них обеспечивает инструменты, способствующие более эффективной разработке и управлению данными в React-приложениях.

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

Дополнительная информация

Методы HTTP «POST» и «GET» являются двумя из наиболее распространенных методов запросов, используемых при взаимодействии клиентских приложений с серверами.

Они имеют следующие различия:

– Назначение:

– «GET». Этот метод используется для получения данных с сервера. Он предназначен для запросов, которые не изменяют состояние сервера и не имеют побочных эффектов. Например, он может использоваться для запроса веб-страниц, изображений, статических ресурсов и других данных.

– «POST». Этот метод используется для отправки данных на сервер для обработки или изменения состояния на сервере. Он предназначен для запросов, которые могут иметь побочные эффекты, такие как создание новых записей, обновление данных или выполнение других действий на сервере.

– Данные:

– «GET». Данные, связанные с запросом «GET», обычно передаются в URL-адресе как строка запроса. Эти данные видны в URL-строке браузера и могут быть закешированы.

– «POST». Данные, связанные с запросом «POST», передаются в теле запроса, что делает их менее видимыми в URL-строке и позволяет передавать большие объемы данных.

– Безопасность:

– «GET». Запросы «GET» обычно используются для получения данных с сервера и не изменяют состояние сервера напрямую, не вносят изменений в базу данных или ресурсы. Они передают данные через URL-адрес, что делает их более прозрачными и подверженными кешированию. С другой стороны – при методе GET отображаются данные в URL-адресе браузера, это делает его менее безопасным для передачи конфиденциальной информации.

– «POST». Метод «POST» отправляет данные на сервер для обработки, и он может привести к изменениям состояния на сервере, созданию или обновлению данных. Поэтому при использовании «POST» необходимо более внимательно обращаться с данными, чтобы избежать возможных уязвимостей безопасности, таких как некорректная обработка или изменение данных. Метод POST передает данные в тело запроса, и считается более безопасным для отправки конфиденциальных данных, так как эти данные не отображаются напрямую в URL-адресе.

– Ограничения на длину данных:

– «GET»: Имеет ограничение на длину URL-адреса, и слишком длинные URL-адреса могут вызывать проблемы.

– «POST»: Не имеет такого ограничения на длину данных, и он более подходит для передачи больших объемов данных.

Выбор между методами «GET» и «POST» зависит от конкретных потребностей вашего запроса. Выбор должен быть обоснован на основе того, какие действия вы хотите выполнить на сервере и какие данные нужно передать.