Введение в redux
TRANSCRIPT
Зачем Redux?
Константин Мельников github.com/archangel-irk
@archangel_irk
141 слайд
Опыт• 8 лет в JavaScript
• Много дизайна и UI/UX. рисование/программирование
• Платформа для создания веб-приложений verstack.com
• WYSIWYG редактор imperavi.com
• Поисковик по барам/кафе/ресторанам cafeteria.ru
• Большая библиотека для визуализации данных (SVG-графика, алгоритмы рисования) anychart.com
• Open-source
2
Небольшой вклад
3
v = f(m)
Функция от данных
4
Flux flow
5
Google Closure Library 2006gmail 2004
6
ReduxDan Abramov (Даниил Абрамов)
Санкт-Петербургский Государственный Университет Телекоммуникаций
7
мы смешиваем две концепции
которые очень нелегки для понимания
8
изменения (mutation) и
асинхронность
как ментос и кола
9
• Изначально это не реализация Flux.
• React Europe and «hot reloading and time travel»
• Flux Hot Loader
• Вдохновление функциональщиной, Elm, Clojure, Haskell.
10
11
Redux вводит ограничения чтобы сделать изменения
состояния предсказуемыми
12
Явное состояние
Три принципа
1. Состояние всего приложения сохранено как дерево объектов в одном хранилище.
2. Единственный способ изменить состояние - это применить действие - объект, который описывает, что произойдёт.
3. Мутации написаны, как чистые функции.
13
(state, action) => state
14
reduce((acc, val) => acc)
15
16
17
18
Reducers + Flux
19
Redux
20
Redux и Alt
21
stores• redux - one, alt - many
• redux - registers reducers, alt - defines logic to execute based on data passed by action
• redux - no tests needed, test reducers, alt - the meat of logic, harder to test without side effects
• redux - immutable, alt - mutable
• alt - ReferenceError: A store named NamesStore already exists, double check your store names or pass in your own custom identifier for each store]
22
stores (alt) - code
23
stores (alt) - tests
24
reducers
• pure functions - zero side-effects, only rely on parameter values
• super easy to test
• they scale - easy to add a new one
25
reducers - code
26
reducers - tests
27
react-redux glue
1
28
react-redux glue
2
29
react-alt glue
1
30
react-alt glue
231
scaling application
32
– Leland Richardson, Software Engineer at Airbnb
«We use Alt, which was developed internally. We may consider using redux in the near
future.».
33
–Josh Perez, Alt creator
«I'm still maintaining it but I'm not sure what to do or where to take it at the moment since
I'm not actively using it.».
«A lot of the companies that were using Alt in production are either thinking of or have
switched over to redux, so in the future I'll be maintaining Alt mostly as an alternative to
redux.».github.com/goatslacker/alt/issues/650
34
Alt activity
35
Redux activity
36
Компромиссы с Redux
• Описать состояние приложения как простой объект или массив
• Описать изменения системы простыми объектами
• Описать логику обработки изменений чистыми функциями
37
А что взамен?• Сохранить состояние в localSrotare и восстановится из него из коробки (F5).
• Наполнить HTML состоянием на стороне сервера. Отправить на клиент и восстановиться. Из коробки.
• Сериализовать действия пользователя и прикрепить их вместе с состоянием из баг репортов. Разработчик может легко воспроизвести баг.
• Передавать объекты действий по сети и реализовать Operational transformation.
• Undo/redo логика и оптимистичный рендеринг без боли. • Гулять по истории при разработке, и переприменять состояние из истории действий когда изменился код. advanced hot reloading. redux-devtools
• Можно писать утилиты для визуализации действий пользователя. • Переписать UI, переиспользовав большую часть бизнес логики.
38
• Хорошая официальная документация redux (есть на русском).
• Redux используется mobile командой и у них можно перенять опыт или обмениваться наработками.
39
Своё мнение.
40
• https://www.youtube.com/watch?v=xsSnOQynTHs
• http://survivejs.com/blog/redux-interview/#why-did-you-develop-redux-
• https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
• http://www.slideshare.net/UldisSturms/redux-vs-alt
41