GDG Odessa "KEEP CALM & TRY REACT JS" 20.09.16. Тимофей Лавренюк "React + Redux. Опыт использования"

1. React + Redux
Опыт использования
@Provectus
Timofey Lavrenyuk

2. Небольшая история…

6. В чем была ошибка?

7. Front End

8. is just the "V" part
React

9. React app structure
(min)
• View
• Controllers, Actions, etc…
• Router
• Data flow

10. React data flow
• Component state
• Flux
• Redux
• Relay

11. Flux
Data architecture, not framework or library

12. Redux
State management library

13. Relay
Javascript framework for building data-driven real applications

14. Redux React

15. Main Principles
• Single source of truth
• State is read-only
• Changes are made with pure functions

16. Redux flow

17. Все намного проще…
• попробовать Redux без React
• попробовать Redux + React (redux-connect)
• использовать ES2016 (ES7)

18. Redux без React

22. Redux + React
redux-connect - модуль для биндинга
redux store в react компонент
Совет: использовать connect как декоратор (ES2016)

25. Стала ли жизнь лучше с Redux?

26. Жизнь - нет, а разработка - да
• состояние не зависит от компонента и один
action может менять много состояний
• легче найти состояние и отделить action
• легче debugging
• состояние (и его историю) легко сохранить
(например в базу или localstorage)
• server rendering

27. Что нового в server rendering?

28. До Redux

29. После Redux

30. index.html
store.js

32. Какая ближайшая альтернатива Redux?
MobX

33. MobX
Simple, scalable state management

35. Спасибо за внимание!