Извлечем информацию из хранилища и отобразим её вместо чисел 1, 2, 3, используя данные из массива cars.
Краткое описание проекта
Проект включает следующие этапы:
- Массив данных: Создан массив элементов для отображения.
- Объединение редьюсеров: Все редьюсеры объединены в index.js.
- Создание хранилища: Хранилище Redux создано на основе объединённого редьюсера (allReducer) в index.js.
- Компоненты: Созданы компоненты: WebPage (отображает HTML), Container (получает данные из хранилища и передает их), и CarList (выводит список машин). CarList подключен к WebPage.
- Провайдер: Провайдер в index.js связывает все части.
Этот подход упрощает разработку больших проектов, позволяя легко добавлять новые компоненты.
Вывод информации из хранилища
Заменим статические числа на данные из массива, создав функцию ShowCars.
const ShowCars = () => {
return (
<ul>
{this.props.cars.map(car => (
<li key={car.id}>{car.name}</li>
))}
</ul>
);
};
Функция получает данные из props.cars и отображает названия автомобилей. Полная информация отображается при клике на название. map перебирает элементы массива, а key={car.id} обеспечивает уникальный идентификатор для каждого элемента.
Использование mapStateToProps
Для больших проектов лучше использовать mapStateToProps, указывающий на используемый массив (state.cars в данном случае):
mapStateToProps = (state) => ({
cars: state.cars
})
Это гарантирует корректную работу в крупных проектах, чётко определяя источник данных.
Урок показал, как извлекать данные из Redux хранилища и отображать их в компоненте React. mapStateToProps и map обеспечивают гибкость и масштабируемость.