31. Выгоды
• Время загрузки страницы сокращается в 5-6 раз
• Снижаются затраты на поддержку
• Быстрый старт новых проектов
• Положительный эффект для SEO
• Снижает риск проблем memory leak
• Write once, run anywhere (WORA)
31
32. Промежуточный итог
• Flux — архитектура для создания клиентских
приложений
• Flux — больше шаблон, чем формальный фреймворк
• Flux создан сделать приложение более
масштабируемым, предсказуемым, а отладку - простой
• Изоморфные приложения повышают UX и снижают
затраты
32
40. Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
• Сложно сделать record/replay состояний
40
41. Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
• Сложно сделать record/replay состояний
• Сложная для понимания роль диспетчера
41
44. Проблемы диспетчера Flux
Store 2
Диспетчер
Action 1
Component 3
Action 1
Uncaught Error: Invariant Violation:
Dispatch.dispatch(...): Cannot dispatch in
the middle of a dispatch.
44
46. Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
• Сложно сделать record/replay состояний
• Сложная для понимания роль диспетчера
• Проблема повторного использования
46
47. Проблемы Flux
при Server-Side Rendering
• Сложно реализовать асинхронную загрузку данных
• Передача состояния сторов от сервера клиенту
• Flux изначально создавался для клиентской части:
“Flux is the application architecture that Facebook
uses for building client-side web applications.”
~ https://facebook.github.io/flux/
- OK
47
60. Middleware
• Точка расширения, куда передаётся action, прежде, чем
попасть в reducers
• Функция, принимающая action, следующий middleware и Store:
60
64. react-redux: connect()
• Подключает к компоненту Store
• Возвращает новый компонент, который содержит
переданный компонент, как вложенный
• Ему в свойствах будут переданы подключенный
Store и функция dispatch
64
68. Подводим итоги
• Нет boilerplate кода, за счёт того, что мутации описываются функциями
• Как следствие - нет зависимости от API, его по сути нет
• При таком подходе легко сделать record/replay
• Нет диспетчера - нет проблемы его понимания
• Легкое повторное использование reducers, пример:
https://github.com/rackt/redux/blob/master/examples/real-world/reducers/
paginate.js
• За счёт middleware легко организовать асинхронную загрузку данных
для компонент:
https://github.com/DenisIzmaylov/redux-catch-promise
68
78. Отзывы
• “Love what you’re doing with Redux”
Jing Chen, creator of Flux
• “I asked for comments on Redux in FB's internal JS
discussion group, and it was universally praised. Really
awesome work.”
Bill Fisher, creator of Flux
Facebook в восторге
78