Контейнеры и компоненты
Прежде чем мы разобьем App.js на компоненты <User />
и <Page />
хотелось бы отметить про способ разделения на "компоненты" и "контейнеры", иначе называемый: деление на "глупые" и "умные" компоненты, "Presentational" и "Container" и быть может как-то еще.
Позволю себе в очередной раз прибегнуть к офф.документации и перевести таблицу различий, которая отлично и кратко отражает суть.
Компонент (глупый) | Контейнер (умный) | |
Цель | Как это выглядит (разметка, стили) | Как это работает (получение данных, обновление состояния) |
Осведомлен о Redux | Нет | Да |
Для считывания данных | Читает данные из props | Подписан на Redux state (состояние) |
Для изменения данных | Вызывает callback из props | Отправляет (dispatch) Redux действие (actions) |
Пишутся | Вручную | Обычно, генерируются Redux |
Магия таблиц обычно проявляется не сразу. Если переписать наше приложение, а потом взглянуть сюда еще раз - многое станет гораздо яснее. Предлагаю так и поступить. Поехали!
Установим prop-types и создадим компоненты.
src/components/User.js
src/components/Page.js
Наш файл App.js - это контейнер (так как подключен к redux). Изменим-с...
src/containers/App.js
Не забудьте так же перенести App.css в src/containers и поменять подключение <App />
в index.js:
Так же удалите файл с тестом - App.test.js, так как тесты в данный момент не входят в нашу программу, но возможно, будут добавлены в конце в раздел рецептов. Так или иначе, на сайте есть подробнейшая статья тестирование компонентов с помощью jest и enzyme.
Итого: изучили на практике деление на компоненты и контейнеры.
Last updated