React Redux: Передача данных из хранилища в компонент

Извлечем информацию из хранилища и отобразим её вместо чисел 1, 2, 3, используя данные из массива cars.

Краткое описание проекта

Проект включает следующие этапы:

  1. Массив данных: Создан массив элементов для отображения.
  2. Объединение редьюсеров: Все редьюсеры объединены в index.js.
  3. Создание хранилища: Хранилище Redux создано на основе объединённого редьюсера (allReducer) в index.js.
  4. Компоненты: Созданы компоненты: WebPage (отображает HTML), Container (получает данные из хранилища и передает их), и CarList (выводит список машин). CarList подключен к WebPage.
  5. Провайдер: Провайдер в 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 обеспечивают гибкость и масштабируемость.

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