React + Redux: Детализированное отображение авто

Этот урок завершает разработку приложения, демонстрируя создание детализированного представления информации об автомобиле с использованием 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, подходит для создания масштабируемых и поддерживаемых веб-приложений.

Что будем искать? Например,программа