React/Redux: Контейнеры компонентов — практический урок

Компоненты React обычно представляют собой простой набор HTML-кода, отображающий информацию без внутренней логики или взаимодействия с хранилищем. Контейнеры же извлекают данные из хранилища и передают их компонентам. Они упрощают разделение логики получения данных и отображения информации. Создадим папку containers внутри js/code.

Создание контейнера CarList

В папке containers создадим файл carlist.js. Импортируем необходимые модули: React, bindActionCreators (для создания экшенов, подробнее — позже) и connect из react-redux.

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

Создадим класс CarList, наследующийся от React.Component. Функция render пока выводит пронумерованный список:

class CarList extends React.Component {
  render() {
    return (
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    );
  }
}

Экспортируем CarList для использования в других компонентах:

export default CarList;

Импортируем его (например, в родительский компонент) и используем как обычный тег: <CarList />. Пока обновление страницы не приведёт к видимым изменениям, так как данные из хранилища ещё не используются.

Подключение к хранилищу Redux

Функция mapStateToProps извлекает данные из состояния Redux и передаёт их компоненту в качестве свойств (props). Она принимает состояние приложения (state) и возвращает объект свойств:

function mapStateToProps(state) {
  return {
    cars: state.cars // Получаем массив cars из состояния приложения
  };
}

Мы получаем массив cars из state.cars (предполагается, что редьюсеры настроены, и в state есть свойство cars).

Подключаем компонент к Redux с помощью connect:

export default connect(mapStateToProps)(CarList);

connect принимает mapStateToProps и возвращает новый компонент, подключенный к хранилищу Redux. CarList теперь получает данные из хранилища через свойства.

Мы создали контейнер, получающий данные из хранилища Redux и передающий их компоненту. Механизм получения данных настроен, но пока не используется для отображения. В следующем уроке рассмотрим отображение списка автомобилей.