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

После пары месяцев написания нескольких SPA на основе React я понял, что некоторые части моего рабочего процесса стали болезненно неэффективными, и мне пришлось обновить свои знания и инструменты. Я начал больше читать о flux и redux и был взволнован, но на меня обрушился шквал вопросов.

Я составил список вещей, которые я хочу хорошо понять, как я буду использовать redux для реального приложения. Проблемы, которые все когда-либо находили. Это то, на что я смотрю, оценивая новую парадигму/структуру, места, куда не попадает большинство примеров дел:

  • Как сделать управление маршрутом, история, пути, ссылки.
  • Как реагировать на пользовательский ввод, который инициирует асинхронные запросы, отображая обратную связь с пользователем, например проверку на стороне сервера или автозаполнение.
  • Загрузка начального состояния с минимальным количеством циклов.
  • Изящная обработка ошибок и частичный поиск информации (включая разбиение на страницы, отложенную загрузку, кэширование).
  • Отладка состояния приложения, тестирование, воспроизводимость ошибок. Легко читаемые трассировки стека.
  • Обработка пользовательских сессий: учетные данные, логин, сохраненные настройки на стороне сервера.
  • Создание приложения для развертывания, строгий CSP, минимизация данных для передачи, пакетная обработка контента для оптимизации запросов.
  • Модульность и тестируемость компонентов.
  • Оптимизация времени разработки: быстрая компиляция, инструменты для перезагрузки (с редуксом, я хочу путешествовать во времени и горячую замену модулей), автоматические линты и тесты.

Поэтому я пошел по магазинам в поисках крутых проектов, использующих Redux. Я нашел пару, которые были довольно интересными:

  • davezuko/react-redux-starter-kit: хороший выбор для начала нового проекта и экспериментов.
  • andrewngu/sound-redux: клиент SoundCloud с довольно большим количеством функций для демонстрационного проекта.
  • react.rocks: галерея доказательств концепций и небольших приложений. Многие из них используют Redux.

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

Вот окончательный результат:

Вы можете проверить код на github. Я начал со всего шаблона, созданного кем-то другим. Я ненавижу шаблоны. Мне понравился react-redux-starting-kit, потому что в нем были примеры почти всего, что я хотел. Я изменил структуру папок, чтобы сделать ее более семантической. Чтобы начать отвечать на некоторые сомнения, которые у меня были, redux-simple-router был способом управления маршрутами и ссылками.

Чтобы решить асинхронное состояние кнопки, я хотел создать библиотеку, аналогичную редукс-формам. По сути, я хотел бы иметь пространство имен в моем состоянии, которое заботится о кнопках и вводах, которые заблокированы в ожидании статуса запроса.

Что касается загрузки начального состояния, я до сих пор не уверен, как быть с изоморфными страницами. Я предполагаю, что примера биткойн-кошелька недостаточно, отчасти потому, что это только на стороне клиента (без пользовательского хранилища). Позже я добавлю еще немного функциональности (вероятно, превратю его в размещенный кошелек, такой как blockchain.info). То же самое с логином, но код в sound-redux убедил меня, что это не будет PITA.

Мне понравилась скорость разработки с заменой модулей в горячем режиме и путешествиями во времени. Ошибки React по-прежнему иногда уродливы для отладки; но теперь это намного лучше с мгновенной обратной связью. Redux-devtools может многое улучшить, но пока все отлично. Я, вероятно, добавлю некоторые функции, чтобы вручную вставлять действия, делать снимки состояния и загружать их.

В общем, это был крутой эксперимент. Я с нетерпением жду, когда рабочие процессы разработчиков значительно улучшатся благодаря методу горячей замены модулей. Кроме того, я продолжу работу над фичами для Шерлока в качестве побочного проекта — у него большой список желаний и пулл-реквесты приветствуются!