Этот урок завершает разработку приложения, демонстрируя создание детализированного представления информации об автомобиле с использованием React и Redux.
Компонент Details
Для отображения подробной информации о выбранном автомобиле создадим компонент Details. Создадим файл details.js в папке containers. В этом файле импортируем React и connect (аналогично carlist.js). Создадим класс Details, наследующий от Component. Функция render будет возвращать HTML-разметку для отображения данных.
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Details extends Component {
render() {
return (
<div>
{/* Здесь будет разметка */}
</div>
);
}
}
export default connect(mapStateToProps)(Details); // mapStateToProps будет определен ниже
Отображение информации
Функция render будет отображать информацию из props, используя свойства автомобиля: name, description, speed, weight, img. Для доступа к этим свойствам, аналогично CarList, используем mapStateToProps.
render() {
const { car } = this.props;
if (!car) {
return <p>Выберите автомобиль</p>;
}
return (
<div>
<h2>{car.name}</h2>
<img src={car.img} alt={car.name} />
<p>{car.description}</p>
<p>Скорость: {car.speed}, Вес: {car.weight}</p>
</div>
);
}
mapStateToProps и обработка отсутствующих данных
Функция mapStateToProps получает не весь список автомобилей (cars), а только активный автомобиль (active). Для этого в reducers/index.js добавим active в состояние. Если активный автомобиль не выбран (car равен null), отобразим сообщение «Выберите автомобиль». Эта проверка предотвращает ошибки при доступе к несуществующим свойствам.
const mapStateToProps = (state) => ({
car: state.active,
});
В webpage.js заменим CarList на Details:
import Details from './containers/details';
// ...
<Details />
Улучшения
Исправим ошибку, связанную с отсутствием свойства name при отсутствии выбранного автомобиля. Вместо отображения пустого объекта по умолчанию, будем передавать null, и обрабатывать это значение в компоненте Details. Удалим всплывающее окно alert из actions/index.js для улучшения пользовательского опыта.
В этом уроке мы создали компонент для детального отображения информации об автомобиле, продемонстрировав использование mapStateToProps для получения данных из Redux хранилища и обработку потенциальных ошибок. Полученное приложение служит хорошей основой для дальнейшего расширения и добавления функциональных возможностей. Эта архитектура, основанная на React и Redux, подходит для создания масштабируемых и поддерживаемых веб-приложений.