ReactJS *

На днях ковыряясь в множестве файлов redux'a, где по логике файлы вынесены в reducers, actions, константы типов actions. Bсе это оказалось весьма не простая задача держа все эти типы файлов у себя в голове и прослеживать логику. И… эврика, появилась идея упрощения написания redux логики. Возможно создавая свой велосипед, но кто не пытался писать свои велосипеды? Но главное это не написание а поддержка написанного когда. Давайте я вам немного постараюсь показать свое видение моей логики redux'a.

О чем пойдет речь?

Посмотрим на метаморфозы редьюсеров в моих Redux/NGRX приложениях за последние пару лет. Начиная с дубового switch-case, продолжая выбором из объекта по ключу и заканчивая классами с декораторами, блекджеком и TypeScript. Постараемся обозреть не только историю этого пути, но и найти какую-нибудь причинно-следственную связь.

Начнём с железа

Доброго времени суток.

У вас тоже есть знакомый react-разработчик, который рассказывает восхитительные истории о сайд-эффектах в redux? Нет?! Могу я стать этим человеком?

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

Приветствую, сегодня я собираюсь поговорить с вами о способе организации Reducer'a. И рассказать с чего я начал и к чему пришел.

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

export default function someReducer(state = initialState, action) {
    switch (action.type) {
    case 'SOME_REDUCER_LABEL':
    return action.data || {};
    default:
    return state;
    }
}

Тут все просто и понятно, но немного поработав с такими конструкциями я понял что данный метод имеет ряд сложностей.

• Метки надо как то хранить, потому что они начали расползаться по проекту и уползать далеко за пределы контроллеров.
• Метки надо было делать уникальными, потому что иначе могло быть пересечение с другими reducer'ами
• Большая часть времени при работе с такой структурой тратилась на организацию кода, нежели на обработку входящих данных
• И когда меток в reducer набирается много — код становиться неряшливым и трудно читаемым, ну и общее пространство имен меня откровенно не радовало.

Вы уже слышали о новом подходе JAMstack? Возможность писать веб-приложения на любимом фреймворке, управлять контентом из админ панели, а на выходе получать полностью валидные HTML-страницы построенные согласно с самыми последними рекомендациями SEO, PWA и a11y.

Интересно? Тогда вот список рассматриваемых вопросов в этой статье:

• Что это за новый стек и зачем он нужен?
• Как запустить базовое приложение используя Gatsby?
• Работа с Contentful и создание первой порции данных
• Как связать Contentful и Gatsby используя GraphQL?
• Настроить автоматический деплоймент используя Netlify

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

Поэтому в данной статье мы разберемся, как передаются callbacks в React, а также обсудим особенности работы event handlers.

Redux — библиотека управления состоянием для приложений, написанных на JavaScript.

Она помогает писать приложения, которые ведут себя стабильно/предсказуемо, работают на разных окружениях (клиент/сервер/нативный код) и легко тестируемы.

• Удалил все комментарии из кода
  Каждый метод библиотеки задокументирован с помощью JSDoc весьма подробно
  
• Убрал валидацию и логирование ошибок
  В каждом методе жёстко контролируются входные параметры с выведением очень приятных глазу подробных комментариев в консоль
  
• Убрал методы bindActionCreators, subscribe, replaceReducer и observable.
  
  … потому что мог. Ну или потому что поленился писать для них примеры. Но без корнер-кейсов они ещё менее интересны, чем то, что ждёт вас впереди.
  

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

Все слышали о методологии БЭМ. CSS-селекторы с подчёркиваниями. Компонентный подход, о котором говорят, имея в виду способ написания CSS-селекторов. Но про CSS в статье не будет ни слова. Только JS, только хардкор!

• подключение di для компонентов
• серверный рендеринг с асинхронной загрузкой данных