Открыть список
Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Архитектура модульных React + Redux приложений

Разработка веб-сайтовJavaScriptАнализ и проектирование системПроектирование и рефакторинг
Tutorial


Большинство разработчиков начинает знакомство с Redux с Todo List Project. Это приложение имеет следующую структуру:

actions/
  todos.js
components/
  todos/
    TodoItem.js
    ...
constants/
  actionTypes.js
reducers/
  todos.js
index.js
rootReducer.js

На первый взгляд такая организация кода кажется логичной, ведь она напоминает стандартные соглашения многих backend MVC-фреймворков:

app/
  controllers/
  models/
  views/

На самом деле, это неудачный выбор как для MVC, так и для React+Redux приложений по следующим причинам:

  1. С ростом приложения следить за взаимосвязью между компонентами, экшнами и редюсерами становится крайне сложно
  2. При изменении экшна или компонента с большой вероятностью потребуется внести изменения и в редюсер. Если количество файлов велико, скролить IDE вверх/вниз не удобно
  3. Такая структура потворствует копипасте в редюсерах

Не удивительно, что многие авторы(раз, два, три) советуют структурировать приложение по «функциональности» (by feature).
Читать дальше →
Всего голосов 16: ↑15 и ↓1 +14
Просмотры50.5K
Комментарии 41

Как я свой Redux писал

Разработка веб-сайтовJavaScriptПрограммированиеReactJS
image

Или Охота на Кракена. В предыдущих заметках (тут и тут) я делился своим Braindump на тему различных архитектурных стилей, в частности Model-View-Controller и Flux.

Я отметил, что не увидел в лице Flux какой-то революции, этот шаблон не что-то новое. Я увидел в нем схожесть с Reenskaug-MVC 1979 года. Также, я упомянул, что решил убрать из своего кода Redux (одна из реализаций Flux). Мне кажется, эти моменты необходимо пояснить более развернуто. Моей целью не было убедить читателя в том, что Flux надо называть MVC, так же я не хотел сказать, что redux-модуль плох и от него нужно полностью отказаться.

Так как же относится тогда к Flux?


Для начала надо определится что же такое Flux. Во-первых это определенно архитектурный стиль, при чем на на данный момент, уже не только для клиентских web-приложений. Во-вторых это набор четко определенных компонентов и терминов.
Читать дальше →
Всего голосов 31: ↑24 и ↓7 +17
Просмотры14.9K
Комментарии 50

Описание подхода к организации и тестированию кода с использованием Redux Thunk

Блог компании EPAMРазработка веб-сайтовJavaScriptReactJS
Из песочницы

Всем привет!


В этой заметке я хотел бы поделиться своим подходом к организации и тестированию кода с использованием Redux Thunk в проекте на React.


Путь к нему был долог и тернист, поэтому постараюсь продемонстрировать ход мыслей и мотивацию, которые и привели к итоговому решению.

Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Просмотры3.4K
Комментарии 2

Redux Toolkit как средство эффективной Redux-разработки

Блог компании InobitecРазработка веб-сайтовJavaScriptReactJSХранилища данных

image
В настоящее время разработка львиной доли веб-приложений, основанных на фреймворке React, ведется с использованием библиотеки Redux. Данная библиотека является самой популярной реализацией FLUX-архитектуры и, несмотря на ряд очевидных преимуществ, имеет весьма существенные недостатки, такие как:


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

Для устранения этих недостатков разработчики Redux представили библиотеку Redux Toolkit. Этот инструмент представляет собой набор практических решений и методов, предназначенных для упрощения разработки приложений с использованием Redux. Разработчики данной библиотеки преследовали цель упростить типичные случаи использования Redux. Данный инструмент не является универсальным решением в каждом из возможных случаев использования Redux, но позволяет упростить тот код, который требуется написать разработчику.


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

Читать дальше →
Всего голосов 12: ↑12 и ↓0 +12
Просмотры28.3K
Комментарии 38

Как делать асинхронные Redux экшены используя Redux-Thunk

JavaScriptReactJS
Перевод
Tutorial

Приветствую Хабр! Представляю вашему вниманию перевод статьи — Asynchronous Redux Actions Using Redux Thunk, автора — Alligator.io


По умолчанию, экшены в Redux являются синхронными, что, является проблемой для приложения, которому нужно взаимодействовать с серверным API, или выполнять другие асинхронные действия. К счастью Redux предоставляет нам такую штуку как middleware, которая стоит между диспатчом экшена и редюсером. Существует две самые популярные middleware библиотеки для асинхронных экшенов в Redux, это — Redux Thunk и Redux Saga. В этом посте мы будем рассматривать первую.
Читать дальше →
Всего голосов 5: ↑4 и ↓1 +3
Просмотры40K
Комментарии 6

Redux Toolkit больше не нужен?

JavaScriptПрограммированиеСовершенный кодReactJSTypeScript
Проблема огромного количества boilerplate-кода при использовании Redux известна всем, каждый ее решает как может. И мы на разных проектах использовали разные костыли и велосипеды, не теряя при этом надежду найти что-то стандартизированное и удобное. Чуть больше года назад мы отчаялись в своих поисках и всерьез взялись за решение проблемы. Что из этого получилось — описано ниже.
Читать дальше →
Всего голосов 15: ↑13 и ↓2 +11
Просмотры9.8K
Комментарии 7

Продвинутые дженерики в TypeScript. Доклад Яндекса

Блог компании ЯндексJavaScriptПромышленное программированиеTypeScript
Дженерики, или параметризованные типы, позволяют писать более гибкие функции и интерфейсы. Чтобы зайти дальше, чем параметризация одним типом, нужно понять лишь несколько общих принципов составления дженериков — и TypeScript раскроется перед вами, как шкатулка с секретом. AlexandrNikolaichev объяснил, как не бояться вкладывать дженерики друг в друга и использовать автоматический вывод типов в ваших проектах.

— Всем привет, меня зовут Александр Николаичев. Я работаю в Yandex.Cloud фронтенд-разработчиком, занимаюсь внутренней инфраструктурой Яндекса. Сегодня расскажу об очень полезной вещи, без которой сложно представить современное приложение, особенно большого масштаба.
Читать дальше →
Всего голосов 9: ↑7 и ↓2 +5
Просмотры4.5K
Комментарии 1