От Flux к Redux. Расскажу о том, как и почему появилась методолгия Flux и какие проблемы она решила. А также почему стоит перейти или как минимум попробовать в деле Redux.

1. и методологии разработки
Алексей Ульянов
Lead Developer at Weblime

2. Знакомьтесь, React.
Это не очередной фреймворк

3. Знакомьтесь, React.
Но библиотека для создания
пользовательского интерфейса (UI).

4. Знакомьтесь, React.
Отдаёт ваш UI и реагирует на события.

5. Знакомьтесь, React.
Это "V" в MVC

6. Ре-рендер, не мутации
Создавайте компоненты,
а не шаблоны
Быстрый виртуальный DOM

7. React не имеет...
... контроллеров
... директив
... шаблонов
... глобальных слушателей событий
... моделей

8. Только
компоненты!

9. Но компоненты надо
как-то организовать

10. методология
FLUX

11. Для начала, надо понять
какую боль она решает

12. Цикличность ошибок

13. Представления обновляют модели.
Модели обновляют другие модели.

14. Flux решает эти проблемы.
Однонаправленный
поток данных

15. Однонаправленный поток данных

16. Action
- Передача данных в Dispetcher
- Запросы к API

17. Dispetcher
- Передача данных в Store

18. Store
- Информировать view (представления)
- Хранить состояние

19. View
- Получение данных
- Отображение данных

20. Как это выглядит
в реальной жизни

21. Отображение данных
Обработка пользовательских данных
Мы запустим поток данных через действие
пользователя.

22. Поток данных
Отображение данных
Обработка пользовательских данных
1. View (представление) говорит создателю
action (действия) выполнить его.

23. Поток данных
Отображение данных
Обработка пользовательских данных
2. Создатель action (действия) форматирует его и
отправляет dispetcher (диспетчеру).

24. Отображение данных
Обработка пользовательских данных
3. Dispetcher (диспетчер) отправляет действие
store (хранилищам) последовательно.

25. Отображение данных
Обработка пользовательских данных
4. Как только состояние изменилось, store (хранилища)
дает об этом знать всем подписанным на него контроллерам.
5. Эти контроллеры затем запросят у store (хранилища)
обновленное состояние.

26. Отображение данных
Обработка пользовательских данных
6. После того как store (хранилище) отдает состояние,
контроллер передаст его дочерним view (представлениям)
запрос на повторное отображение согласно новому состоянию.

27. Звучит здорово?
Давайте взглянем на Redux

28. методология
REDUX

29. Какие проблемы решает
1. Код хранилищ не может быть перезагружен
без обнуления состояния

30. Какие проблемы решает
1. Код хранилищ не может быть перезагружен
без обнуления состояния
РЕШЕНИЕ
Просто разделите эти две функции.

31. Какие проблемы решает
2. Состояние перезаписывается
при каждом действии

32. Какие проблемы решает
2. Состояние перезаписывается
при каждом действии
РЕШЕНИЕ
Скопируйте состояния и примените
изменения к копии.

33. Какие проблемы решает
3. Нет правильных “мест” для сторонних плагинов

34. Какие проблемы решает
3. Нет правильных “мест” для сторонних плагинов
РЕШЕНИЕ
Сделать легким “оборачивание” частей системы в
другие объекты.

35. Редьюсеры (The reducers)
Отображение данных, обработка пользовательских данных.
Когда хранилище хочет узнать, как действие изменяет
состояние, оно спрашивает reducer (редьюсеры).

36. Отображение данных
Обработка пользовательских данных
Как это работает
1. Подготовить хранилище. Корневой компонент
создаёт хранилище, говоря ему, какой корневой
редьюсер использовать

37. Отображение данных
Обработка пользовательских данных
Как это работает
2. Установить связь между хранилищем
и компонентами.

38. Как это работает
3. Подготовить обратные вызовы для действий.
Отображение данных
Обработка пользовательских данных

39. Что ещё?
• Простота и предсказуемость
• Мало магии
• Линейное масштабирование
• Малое количество абстракций
• Boilerplate

40. CONTACT ME
al.ulianov@gmail.com
vk.com/al.ulianov
facebook.com/ulianovalexey
Вопросы?