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

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

В следующих главах мы рассмотрим более сложные сценарии использования контекста.

Глава 2. Redux и управление глобальным состоянием

Как вы помните, Redux – это библиотека для управления глобальным состоянием3737
  Глобальное состояние в контексте React и Redux относится к данным, которые доступны в приложении на всех уровнях его иерархии компонентов.


[Закрыть] в приложениях на React. В этой главе мы рассмотрим, как использовать Redux для централизованного управления данными и состоянием приложения.

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

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

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

Redux включает в себя следующие ключевые понятия:

– Хранилище (Store). Централизованное место для хранения всего состояния вашего приложения. Хранилище позволяет удобно управлять данными приложения и предоставляет доступ к ним из любой части приложения.

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

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

– Подписчики (Subscribers). Компоненты, которые подписываются на состояние в хранилище и автоматически перерендериваются при его изменении. Это позволяет компонентам всегда отображать актуальное состояние приложения без необходимости передачи данных через много уровней компонентов.

– Установка Redux.

Для начала работы с Redux установите соответствующий пакет с помощью команды:

npm install redux react-redux.

Эти пакеты позволят вам использовать Redux в вашем приложении.

– Создание хранилища.

Создайте хранилище, которое будет служить центральным местом для хранения всего состояния вашего приложения. Хранилище должно быть создано с использованием функции createStore из Redux.

 
import {createStore} from ’redux’
    import rootReducer from». /reducers’
    const store = createStore (rootReducer)
 
 
– Определение действий:
Определите действия, которые будут описывать изменения состояния. Действия представляют собой объекты, содержащие тип (type) и дополнительные данные, связанные с изменением.
 
 
const incrementCounter = () => ({
type: «INCREMENT_COUNTER»
 

})

 
– Создание редюсеров.
Создайте редюсеры, которые будут обрабатывать действия и вносить изменения в состояние. Редюсеры являются чистыми функциями, принимающими предыдущее состояние и действие, и возвращающими новое состояние приложения
 
 
const counterReducer = (state = 0, action) => {
  switch (action. type) {
    case «INCREMENT_COUNTER»:
      return state +1
    default:
      return state
 

}

}

 
– Подключение к компонентам.
Подключите ваши компоненты к хранилищу с использованием функции connect из пакета react-redux или с помощью хуков useSelector и useDispatch из React Redux. Это позволит вашим компонентам взаимодействовать с состоянием и действиями Redux.
 
 
import {connect} from ’react-redux’
 
 
const mapStateToProps = (state) => {
  return {
    counter: state.counter
}
}
export default connect (mapStateToProps) (YourComponent)
 

Рассмотрим пример простого счетчика при помощи Redux.

store. ts:

 
import {createStore} from ’redux’
 
 
// Определение типа для состояния
type AppState = {
  count: number
};
 
 
// Определение действий (actions)
enum ActionType {
 

INCREMENT = «INCREMENT»,

DECREMENT = «DECREMENT»,

 
}
 
 
type IncrementAction = {
  type: ActionType.INCREMENT
}
 
 
type DecrementAction = {
  type: ActionType.DECREMENT
}
 
 
type Action = IncrementAction | DecrementAction
 
 
// Инициализация состояния
const initialState: AppState = {
  count: 0,
}
 
 
// Редуктор (reducer)
const reducer = (state: AppState = initialState, action: Action): AppState => {
  switch (action. type) {
    case ActionType.INCREMENT:
      return {…state, count: state.count +1}
    case ActionType.DECREMENT:
      return {…state, count: state.count – 1}
    default:
      return state
}
}
 
 
// Создание хранилища Redux
const store = createStore (reducer)
 
 
export default store
 

CounterComponent. tsx:

 
import React from ’react’
import {useSelector, useDispatch} from ’react-redux’
import {AppState} from». /store’ // Импортируйте AppState из файла с хранилищем
import {ActionType} from». /store’ // Импортируйте ActionType из файла с хранилищем
 
 
const CounterComponent: React. FC = () => {
  // Получение значения состояния из хранилища
  const count = useSelector ((state: AppState) => state.count)
  const dispatch = useDispatch ()
 
 
  // Обработчики событий для действий
  const handleIncrement = () => {
    dispatch ({type: ActionType.INCREMENT})
}
 
 
  const handleDecrement = () => {
    dispatch ({type: ActionType.DECREMENT})
}
 
 
  return (
    <div>
      <p> Текущее значение: {count} </p>
      <button onClick= {handleIncrement}> Увеличить </button>
      <button onClick= {handleDecrement}> Уменьшить </button>
    </div>
)
}
 
 
export default CounterComponent
 

App. tsx:

 
import React from ’react’
import {Provider} from ’react-redux’
import store from». /store’
import CounterComponent from». /CounterComponent’
 
 
const App: React. FC = () => {
  return (
    <Provider store= {store}>
      <CounterComponent />
    </Provider>
)
}
 
 
export default App
 

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

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

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

В следующих разделах мы более подробно рассмотрим различные аспекты работы с асинхронные операции с redux thunk

Redux Thunk – это расширение для Redux, которое позволяет выполнять асинхронные операции, такие как отправка запросов к серверу, в действиях Redux.

В этой главе мы рассмотрим, как использовать Redux Thunk для работы с асинхронными операциями в Redux.

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

Redux Thunk позволяет разработчикам создавать асинхронные действия (action creators), которые могут взаимодействовать с сетью, выполнять асинхронные запросы к серверу, и обновлять состояние приложения на основе результатов этих запросов.

Важные моменты о Redux Thunk:

– Асинхронные действия. Redux Thunk позволяет создавать действия, которые могут выполнять асинхронные операции, такие как запросы к серверу, без необходимости менять основное API Redux.

– Использование функций: Вместо того, чтобы создавать объекты действий, функции Redux Thunk возвращают другие функции, которые могут выполнять асинхронные задачи и взаимодействовать с Redux.

– Удобство обработки ошибок. Redux Thunk обеспечивает удобный способ обработки ошибок, возникающих в процессе выполнения асинхронных операций, путем использования блоков try/catch.

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

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

Для начала работы с Redux Thunk необходимо установить соответствующий пакет:

npm install redux-thunk;

Для создания асинхронных действий используйте функции, возвращаемые другой функцией (action creator), вместо обычных объектов. Эти функции могут выполнять асинхронные операции и диспетчеризировать другие действия при завершении.

Пример асинхронного действия с Redux Thunk:

 
import {fetchDataSuccess, fetchDataFailure} from». /actions’
import {thunk} from ’redux-thunk’
 
 
export const fetchData = () => {
  return async (dispatch) => {
    try {
      // Выполняем асинхронную операцию (например, отправка запроса на сервер)
      const response = await fetch (»https://api.example.com/data')
      const data = await response. json ()
      // Диспетчеризируем успешное действие
      dispatch (fetchDataSuccess (data))
} catch (error) {
      // Диспетчеризируем действие с ошибкой
      dispatch (fetchDataFailure (error))
 

}

}

}

Объяснение кода:

– import {fetchDataSuccess, fetchDataFailure} from». /actions’;

Эта строка импортирует функции fetchDataSuccess и fetchDataFailure из файла actions. Они представляют собой действия Redux для обработки успешных данных и ошибок.

– export const fetchData = () => {

Здесь экспортируется функция fetchData, которая бдет использоваться для выполнения асинхронной операции.

– return async (dispatch) => {

Функция fetchData возвращает другую функцию, которая принимает аргумент dispatch. Это особенность Redux Thunk – она позволяет возвращать функцию вместо обычного объекта действия.

– Внутри этой вложенной функции выполняются следующие действия:

– const response = await fetch (»https://api.example.com/data');

Здесь выполняется асинхронный запрос к серверу по указанному URL с использованием fetch. Ответ сервера ожидается в переменной response.

– const data = await response. json ();

Если запрос к серверу успешно выполнен, мы асинхронно парсим ответ в формат JSON и сохраняем данные в переменной data.

– dispatch (fetchDataSuccess (data)); Если данные успешно получены, вызывается функция dispatch с действием fetchDataSuccess, которая отправляет успешные данные в Redux. Это обычно приводит к обновлению состояния приложения.

– dispatch (fetchDataFailure (error));

Если произошла ошибка во время выполнения запроса или парсинга JSON, вызывается функция dispatch с действием fetchDataFailure, которая отправляет ошибку в Redux. Это может использоваться для обработки ошибок и уведомления пользователя о них.

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

Файл actions – файл, созданный разработчиком, а не стандартный файл какой-либо библиотеки. В Redux (и в некоторых других библиотеках управления состоянием) вы обычно создаете свои собственные файлы с действиями (actions), которые представляют собой объекты или функции, описывающие, что происходит в вашем приложении.

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

Примеры действий в Redux могут включать в себя действия для:

– Получения данных с сервера (как в вашем примере).

– Обновления состояния приложения.

– Обработки ошибок.

– Изменения пользовательских настроек.

– Других событий, которые имеют значение для приложения.

Чтобы использовать Redux Thunk, укажите его в функции applyMiddleware при создании хранилища Redux.

Пример подключения Redux Thunk к хранилищу:

 
import {createStore, applyMiddleware} from ’redux’
import thunkMiddleware from ’redux-thunk’
import rootReducer from». /reducers’
const store = createStore (rootReducer, applyMiddleware (thunkMiddleware))
import {useDispatch} from ’react-redux’
import {fetchData} from». /actions’
function MyComponent () {
  const dispatch = useDispatch ()
  const handleClick = () => {
    // Вызываем асинхронное действие
    dispatch (fetchData ())
}
  return (
    <button onClick= {handleClick}> Загрузить данные </button>
 

)

}

Redux Thunk является важным инструментом в экосистеме Redux, который обеспечивает эффективное управление асинхронными операциями в веб-приложениях. Этот средний слой позволяет создавать асинхронные действия (action creators), управлять сетевыми запросами, и обрабатывать асинхронные операции в Redux-приложениях. Redux Thunk дарит разработчикам гибкость и мощные инструменты для управления состоянием и взаимодействия с внешними данными.

С использованием Redux Thunk, разработчики могут легко интегрировать сетевой запрос, асинхронные задачи и другие асинхронные операции в свои Redux-приложения, обеспечивая отзывчивость и эффективность. Этот инструмент считается одним из наиболее популярных и важных в инструментарии Redux, и он применяется во многих современных веб-приложениях.

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

Таким, образом, Redux Thunk – это инструмент для работы с асинхронными операциями в Redux. Он позволяет размещать логику асинхронных операций в действиях Redux и управлять состоянием приложения после их завершения. В следующих главах мы рассмотрим другие методы работы с асинхронными операциями в Redux и более сложные сценарии использования.

В следующей главе рассмотрим методы улучшения кода.

Глава 4: Рефакторинг и лучшие практики

Рефакторинг – это процесс изменения структуры и кода приложения с целью улучшения его читаемости, поддерживаемости и эффективности. В этой главе мы рассмотрим некоторые лучшие практики и принципы рефакторинга для разработки приложений на React и Redux.

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

Рефакторинг позволяет:

– Улучшить читаемость кода. Чистый и структурированный код легче понимать и поддерживать.

– Уменьшить сложность. Разбивание сложных компонентов на более мелкие части упрощает разработку и отладку.

– Ускорить разработку. Хорошо организованный код позволяет быстрее добавлять новые функции и исправлять ошибки.

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

Практики и принципы, которые следует соблюдать при рефакторинге кода React и Redux:

– Одна ответственность (Single Responsibility Principle). Каждый компонент или функция должны выполнять одну конкретную задачу. Если компонент слишком большой или выполняет слишком много операций, разделите его на более мелкие компоненты.

– Изоляция состояния (State Isolation). Старайтесь хранить состояние в как можно меньшем числе компонентов. Локализуйте состояние на уровне, где оно действительно нужно, и передавайте его через пропсы.

– Используйте Redux DevTools. Если вы используете Redux, установите и настройте Redux DevTools. Они предоставляют мощные инструменты для отладки и мониторинга состояния вашего приложения.

– Разбивайте компоненты: Если компонент становится слишком сложным, разбейте его на более мелкие компоненты с собственной логикой и стилями. Это улучшает читаемость и тестируемость кода.

– Проверяйте типы (Type Checking). Используйте TypeScript или PropTypes для проверки типов пропсов и состояния компонентов. Это помогает предотвратить ошибки во время выполнения.

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

– Поддерживайте документацию. Ведите документацию для своего кода, включая описание компонентов, их пропсов и методов.

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

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

fetch – это встроенная функция в современных браузерах, предназначенная для выполнения сетевых запросов (как правило, HTTP-запросов) на сервер. Она используется для отправки запросов на удаленный сервер и получения данных в ответ.

Вот как можно использовать fetch для отправки GET-запроса:

 
fetch (»https://api.example.com/data')
.then ((response) => {
    // Обработка ответа от сервера
    if (!response. ok) {
      throw new Error («Ошибка HTTP: ' + response.status);
}
    return response. json () // Парсим ответ в формат JSON
 

})

.then ((data) => {

// Обрабатываем данные, полученные от сервера

})

.catch ((error) => {

// Обрабатываем ошибку, если что-то пошло не так

});

Как видно из этого примера:

– fetch принимает URL, куда нужно отправить запрос.

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

– Обычно после успешного ответа, вы вызываете метод. json () для парсинга ответа в формат JSON. Это позволяет вам работать с данными, полученными от сервера, как с объектами JavaScript.

– Если что-то пошло не так, например, если сервер вернул ошибку, вы можете обработать ошибку с помощью. catch.

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

Часть 8. Тестирование и развертывание

Глава 1. Тестирование компонентов с использованием

Jest и React Testing Library

Тестирование компонентов играет важную роль в разработке приложений React. В этой главе мы рассмотрим, как использовать Jest и React Testing Library для тестирования компонентов в проекте React, основанном на TypeScript.

Jest – это фреймворк для тестирования JavaScript и TypeScript, который предоставляет инструменты для написания, запуска и анализа тестов.

React Testing Library – это библиотека, которая облегчает тестирование компонентов React, сосредотачиваясь на поведении компонентов с точки зрения пользователя.

Основные методы тестирования:

– Render. Проверка, что компоненты отрисовываются корректно.

– User Events. Симуляция пользовательских событий, таких как клики, изменения и ввод данных.

– Assertions. Проверка соответствия ожидаемого и фактического результата с помощью утверждений.

Подход к тестированию:

– Тестируйте поведение, а не реализацию. Сосредоточьтесь на том, как компонент взаимодействует с пользователем, а не на его внутренней реализации.

– Сфокусируйтесь на пользовательском опыте. Тестируйте компоненты так, как их использует пользователь.

Преимущества:

– Простота и удобство. Jest и React Testing Library предлагают простые и интуитивно понятные методы тестирования.

– Поддержка React-специфических функций. Они помогают работать с особенностями React, такими как хуки и контекст.