Redux на простом английском: создание шаблона

Примечание: этот пост был первоначально опубликован в блоге Quick Left 20.04.2016.

Переход на новое приложение - одна из самых настоящих радостей разработки программного обеспечения. Здесь нет плотного контекста, который нужно изучать, никаких хитрых уловок для навигации, и есть новая возможность сделать все правильным. Однако для приложений React требуется нетривиальная настройка количества, учитывая объем библиотеки. В отличие от чего-то вроде Ember, React не стремится быть всеобъемлющим фреймворком и поэтому не имеет аналога ember new ProjectName. По этой причине вы найдете в дикой природе тонну шаблонных и начальных примеров приложений. Если сообщество Ember согласовало некоторые предпочтения стиля или соглашения, разработчики React могут создавать свои собственные.

Настройка приложения React - нетривиальная задача по ряду причин. Одна из проблем - это относительно новый и быстро развивающийся набор инструментов. Webpack - потрясающий инструмент, лежащий в основе многих приложений Redux. Тем не менее, разработчики часто изучают и то, и другое примерно в одно и то же время, что может стать пугающей кривой обучения. Webpack также действует как главный коммутатор для Babel, ESlint, горячей перезагрузки модулей и многого другого. Если у вас кружится голова, пытаясь понять, как все эти интеграции работают гармонично, не бойтесь.

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

Инициализировать новый проект

Как и любой хороший приверженец JavaScript, мы будем использовать npm для управления нашими зависимостями. Выполните непростую работу по выбору имени для вашего проекта, создайте и перейдите в этот каталог, а затем запустите npm init. Ответьте на вопросы по настройке проекта так, как считаете нужным. Поскольку приложение не предназначено для втягивания куда-либо в качестве зависимости, семантическое управление версиями и большинство других вопросов несущественны. Я выбрал лицензию Массачусетского технологического института по незнанию.

Настройка webpack

Переходим к главному событию. Webpack будет согласовывать работу всех инструментов приложения. Если вы совершенно не знакомы, я бы порекомендовал запустить официальное руководство, чтобы быстро понять, как выглядит объединение модулей. Этот блог - еще один отличный ресурс для заполнения некоторых пробелов. Распространенной практикой является наличие отдельных файлов конфигурации веб-пакетов для производства и разработки, потому что каждый сценарий может (и должен) использовать уникальные инструменты. Если вы хотите пропустить, вот мои файлы webpack.dev.config.js и webpack.prod.config.js.

На самом высоком уровне webpack берет entry файл, объединяет приложение в один (или несколько) файлов и выводит результат туда, где мы указываем в output. Естественно, ценность webpack не в том, что он превращает ваше приложение в один файл JavaScript, а в дополнительной интеграции плагинов. Несколько примеров:

Погрузчики

Webpack использует зависящие от типа загрузчики для извлечения практически всего: JavaScript, JSON, CSS, изображений и т. Д. В файле конфигурации веб-пакета загрузчики перечислены как минимум с парой свойств: test иloader. test обычно предоставляет регулярное выражение для проверки соответствующих имен файлов, а loader указывает тип загрузчика, который следует использовать для этих файлов. Подробнее читайте здесь. Обратите внимание, что каждый загрузчик нужно будет устанавливать отдельно через npm.

Вавилон

Вы, наверное, заметили, что все примеры приложения Redux, которые вы видели, используют синтаксис ES6. Поскольку браузеры еще не совсем готовы к работе с ES6 из коробки, Babel восполняет этот пробел для нас. Мы можем представить Babel через веб-пакет, просто подключив еще один загрузчик: babel-loader. Установите загрузчик, babel-core и любые интересующие вас пресеты Babel. Популярным соглашением для приложений Redux является использование babel-preset-es2015 и babel-preset-react. См. Мой package.json для зависимостей, webpack config для реализации загрузчика и .babelrc для предустановленной конфигурации.

ESlint

Разработка с помощью линтера - необходимость. Интеграция Webpack с ESlint является точной, выполняя проверку каждого сохранения вашего редактора. Устанавливаем по знакомому шаблону: eslint-loader. Установите загрузчик eslint и плагин React: eslint-plugin-react. Вместо добавления этого в список существующих загрузчиков в файле конфигурации webpack, ESlint получит специальную обработку и будет вложен под ключ preLoaders. Это имеет интуитивно понятный смысл, потому что мы хотим, чтобы наш код был обработан до того, как будут применены преобразования Бабеля. Пока загрузчик ESlint применяется над загрузчиком Babel, он будет работать так, как задумано, но использование preLoader является хорошей защитой. В ESlint есть собственная удобная функция, которая поможет вам сгенерировать файл конфигурации: eslint --init. Я использовал расширенную настраиваемую конфигурацию для большей детализации, которую можно было просмотреть здесь.

Горячая перезагрузка

«Горячая перезагрузка» - лучшее улучшение рабочего процесса, которое можно было увидеть за последнее время. Это позволяет обновлять страницу без потери состояния. Итак, если вы прошли по нескольким страницам и заполнили несколько форм, чтобы попасть в тот угол вашего приложения, где вы хотите протестировать ошибку, внесение изменений в ваше приложение вызывает мгновенное обновление страницы с сохранением этого состояния.

В настоящее время лучше всего использовать эту функцию с помощью react-hot-loader. Для горячей перезагрузки требуется сервер разработки, поэтому для его настройки потребуется немного больше усилий. Для справки ознакомьтесь с моим файлом server.js и соответствующими обновлениями webpack.dev.config.js для loaders, _20 _, _ 21_ и plugins. Важное примечание: есть планы по постепенному отказу от react-hot-loader в пользу (в настоящее время экспериментальной) библиотеки react-transform-hmr.

Шаблон Redux

Если вы пришли сюда, чтобы узнать, как работает Redux, вы, наверное, уже догадались, что этот пост не тот. Но хорошие новости: есть такой пост.

Моя цель для этого шаблонного проекта состояла в том, чтобы включить достаточно строительных лесов Redux, чтобы четко передать полный рабочий процесс. По личным предпочтениям я вложил приложение Redux в src каталог. Там вы найдете обычный набор персонажей: контейнеры, компоненты, действия, редукторы и магазин. Я реализовал небольшую функцию создания списков, чтобы проиллюстрировать рабочий процесс Redux. Не стесняйтесь сделать паузу, чтобы изучить это здесь.

Маршрутизация

Данные маршрутизации могут быть представлены объектом JavaScript, поэтому их можно отслеживать в нашем глобальном объекте состояния Redux, как и все остальное. Большинство приложений Redux, которые я встречал, используют response-router. Однако есть пара библиотек маршрутизации, специфичных для Redux: react-router-redux и redux-router. Я добился успеха с обоими, но первый завоевал больше всего сердец и получил место в Reactjs Github organization.

react-router-redux - небольшая библиотека, которая использует существующие react-router API-интерфейсы для обновления объекта состояния Redux с изменениями маршрутизации. Для реализации react-router-redux мы используем функцию syncHistoryWithStore в index.js, визуализируем компонентRouter в компоненте Root и строим маршруты в routes.js. Последний шаг - включить редуктор маршрутизации в нашу combineReducers функцию. На этом этапе типичная навигация React с использованием react-router будет зафиксирована в нашем глобальном объекте состояния Redux.

DevTools

Приятная часть сбора информации о маршрутизации в хранилище Redux заключается в том, что Redux DevTools позволяет нам использовать ее для отладки путешествий во времени. С помощью DevTools мы можем просматривать опыт пользователя с нашим приложением в зависимости от каждого изменения состояния, перематывая и перематывая их сеанс. Реализовать DevTools довольно просто. Мы создадим шаблон в компоненте DevTools и настроим их в магазине, когда мы будем в разработке. Обратите внимание, что в компоненте DevTools задействовано еще несколько зависимостей, одна из которых - DockMonitor. После установки мы можем скрыть или отобразить инструменты с помощью Ctrl + h и изменить их положение на экране с помощью Ctrl + w.

Тестирование

Я решил включить в этот проект Мокко, ожидать и фермент. Проект Redux официально рекомендует Mocha и широко использует expect. Enzyme - это новый фреймворк для тестирования компонентов, написанный и поддерживаемый людьми из Airbnb. Он быстро завоевал популярность благодаря простоте использования и сходству с jQuery. Единственная особенность, которую стоит отметить, заключается в том, что mount API фермента требует для рендеринга DOM. JSDOM - распространенный вариант, требующий небольшого количества шаблонов, однако я предпочел, чтобы это обрабатывалось кармой через браузер Chrome.

Карма - это тест-раннер, и в его конфигурационном файле мы указываем пути к нашим тестовым файлам и другие настройки. Karma также может ускорить время разработки, запуская набор тестов при каждом изменении файла, обеспечивая быстрые циклы обратной связи. Для этого нужно задать свойства singleRun и autoWatch. Обратите внимание на несколько зависимостей с префиксом karma в package.json.

Подведение итогов

Мало кто станет экспертом в настройке проектов React, потому что эта работа обычно попадает в категорию установил и забыл. Часто кто-то проходит через этот процесс, чтобы запустить проект, а затем редко нужно настраивать его снова. Тем не менее, для других разработчиков проекта важно иметь некоторое представление об инструментах, которые он использует. Во-первых, чтобы уменьшить ваш фактор шины, но, кроме того, чтобы лучше следить за новыми событиями в экосистеме. Поскольку webpack и его друзья продолжают быстро развиваться, оставаться в курсе означает бесплатное повышение производительности, функций и / или безопасности. На момент написания webpack 2.0 находится в стадии бета-тестирования; посмотри, что будет дальше.

Важно, чтобы ваше приложение было основано на прочном фундаменте, и нет ничего плохого в том, чтобы использовать шаблон, который поможет вам достичь этого. Есть даже пара библиотек генераторов, например, generator-redux. Если вы используете мое или любое другое стандартное приложение, чтобы начать работу, сделайте домашнюю работу, чтобы понять, какие инструменты используются, а затем приступайте к созданию! В конце концов, в этом ли смысл стартового комплекта, верно?

При создании стандартного приложения учитывается множество личных предпочтений. Что я упустил из того, что вы предпочитаете использовать? Какие-нибудь инструменты или стили? Дай мне знать в комментариях. Если вы не предпочитаете использовать точку с запятой. Тогда ты ошибаешься. 😉

Примечание: с момента написания этой статьи я опубликовал redux-starter-v2. В его основе лежит новый инструмент React CLI create-react-app.