Рубрика «redux» - 4

Когда речь идёт о разработке React-приложений, то, в плане архитектуры кода, маленькие проекты часто бывают более гибкими, чем большие. Нет ничего плохого в том, чтобы создавать такие проекты с использованием практических рекомендаций, нацеленных на более крупные приложения. Но всё это, в случае с маленькими проектами, может оказаться попросту ненужным. Чем меньше приложение — тем «снисходительнее» оно относится к использованию в нём простых решений, возможно — неоптимальных, но не требующих больших затрат времени на их реализацию.

11 советов для тех, кто использует Redux при разработке React-приложений - 1

Несмотря на это хотелось бы отметить, что некоторые рекомендации, которые будут даны в этом материале, нацелены на React-приложения любого масштаба.
Читать полностью »

Всем привет! Меня зовут Дмитрий Новиков, я javascript-разработчик в Альфа-Банке, и сегодня я расскажу вам про наш опыт выведения Action type при помощи Typescript, с каким проблемами мы столкнулись и как их решили.

Это расшифровка моего доклада на Alfa JavaScript MeetUp. Код из слайдов презентации можно посмотреть здесь, а запись трансляции митапа — здесь.

Наши фронтовые приложения работают на связке React+Redux. Redux data flow упрощенно выглядит так:
Выведение Action type с помощью Typescript - 1
Читать полностью »

перебор с эффектами

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

Дисклеймер

Уважаемый читатель! Если вы не имеете понятия, что такое React и Redux, читать дальше не имеет смысла, дальше технический бред. Я серьезно, понимание к чему эта записка, требует работы с указанными библиотеками — несмотря на то, что я постараюсь писать понятно, это статья не начального уровня. А еще это личный опыт и мнение, основанные на практике.

image

Что не так с использованием Redux?

Тут я надумал написать, а что собственно не так с использованием redux в моем проекте и тысячах других? Я же пишу приложения на react / redux эдак с апреля 2016 года(три года). Пора бы уже открыть некие интересности… А то лекции и доклады, особенно нацеленные на новичков, были, а вот какого-то взрослого взгляда назад и ретроспективы не было. А пока кто-то ставит звездочки пакетам, которые проверяют «а не 13 ли ты часом», я буду разбивать стену сложившихся стереотипов.
Читать полностью »

Итак, вы решили сделать новый проект. И проект этот — веб-приложение. Сколько времени уйдёт на создание базового прототипа? Насколько это сложно? Что должен уже со старта уметь современный веб-сайт?

В этой статье мы попробуем набросать boilerplate простейшего веб-приложения со следующей архитектурой:

Делаем современное веб-приложение с нуля - 1

Что мы покроем:

  • настройка dev-окружения в docker-compose.
  • создание бэкенда на Flask.
  • создание фронтенда на Express.
  • сборка JS с помощью Webpack.
  • React, Redux и server side rendering.
  • очереди задач с RQ.

Читать полностью »

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

Читать полностью »

image

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

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

Читать полностью »

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

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

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

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

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

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

TL;DR: базовая логика redux помещается в 7 строк JS кода

О redux вкратце (вольный перевод заголовка на гитхабе):

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

Я склонировал репозиторий redux (https://github.com/reduxjs/redux), открыл в редакторе папку с исходниками (игнорируя docs, examples и прочее) и взялся за ножницы клавишу Delete:

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

А теперь давайте разберём то, что осталось
Читать полностью »

Piter GraphQL: видеозаписи с митапа в Wrike - 1

24 января в офисе Wrike прошел первый в Петербурге митап по GraphQL. Чтобы разобраться в жизнеспособности хайповой технологии мы, во-первых, суммировали результаты своих исследований в этой теме, во-вторых, позвали в гости Павла Черторогова, опенсорс-мейнтейнера, который с конца 2015 года разрабатывает изоморфные приложения. Летом 2016 Павел начал разработку graphql-compose в опенсорсе.

Для тех, кто не смог прийти, мы публикуем видеозаписи докладов.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js