Паттерн контейнер - популярный паттерн, который вы встретите здесь в приложениях Dollar Shave Clubs React. Контейнеры, помимо прочего, отвечают за выборку данных, отправку действий и отображение информации на компонент представления. По мере того, как наше программное обеспечение становится более функциональным, мы часто стремимся упростить разработку.

1. Страница надстроек

Давайте посмотрим на образец контейнера и маршрута, которые можно использовать для работы страницы, позволяющей добавлять дополнительные продукты в корзину:

Здесь мы создали новую страницу, контейнер которой импортирует AddonsView и сопоставляет состояние и действия с реквизитами. Здесь ничего особенного.

Что, если мы хотим проверить другую точку зрения? У нас есть пара вариантов:

Решение 1. Добавьте в контейнер дополнительную логику, чтобы определить, какое представление загружать. Обратной стороной этого является то, что контейнер может стать беспорядочным, и если вам нужно новое представление на другом маршруте, все усложняется.

Решение 2. Полностью продублируйте контейнер и измените одну строку кода, в которой указано, какое представление нужно импортировать. Проблема заключается в ненужном дублировании кода. Сделать это очень просто, но мы можем добиться большего.

Решение 3: вместо вызова функции, возвращенной из connect(...)(AddonsView), просто верните ее.

2. Страница дополнительных услуг

Страница «Дополнительно» имеет ту же логику, что и «Дополнения», но использует совершенно другое представление.

Все, что нам нужно сделать сейчас, это подключить контейнер к представлению непосредственно в нашем маршрутизаторе и вуаля: несколько представлений в одном контейнере.

3. Страница допродажи

Что еще мы можем сделать? Что угодно, правда. Это просто Javascript. Скажем, нам нужно не только указать другое представление, но и указать разные продукты для загрузки. Давайте изменим наш новый контейнер Upsell, чтобы экспортировать нашу собственную функцию, которая принимает объект параметров:

Теперь это можно использовать в наших маршрутах более настраиваемым образом:

Резюме

Вместо того, чтобы экспортировать обычные compose или connect, экспортируйте все, что захотите! Архитектура Reacts расширяет возможности самого языка, давайте воспользуемся этим.

Некоторые недостатки включают следующее:

  • Расползание функций: контейнеры становятся слишком большими, когда одной странице требуется дополнительная функция, которая может отсутствовать на другой странице. Это постоянное уравновешивающее действие, которое будет продолжаться в любой кодовой базе, независимо от стека, технологии или инженеров.
  • Нетрадиционно: мы начинаем экспортировать то, чего вы не ожидали от файлов-контейнеров. Вот где надежное тестирование, документация и общение с вами и вашей командой становятся более разумными.

В конце концов, вы должны использовать то, что лучше всего подходит для вас. Настраиваемые контейнеры могут быть мощным способом создания и формирования желаемого опыта для ваших клиентов, сохраняя при этом компактность кодовой базы.

Хотите помочь избавиться от кода из нашей кодовой базы? Напишите нам в Twitter или загляните на нашу страницу карьеры, чтобы изучить возможности!