Reasons why to move from MVC to Flux architecture. Presentation on Redux and why should be part of the tech stack since day one.

1. @marcolanaro86

2. 9 February 2017 2

3. 9 February 2017 3

4. 9 February 2017 4

5. 9 February 2017 5

6. 9 February 2017 6

8. 9 February 2017 8

9. 9 February 2017 9

10. 9 February 2017 10

11. 9 February 2017 11

12. 9 February 2017 12
Simplify the debugging and on boarding process because
it’s easier to reason about the state.
Simpler to test and Easier to implement difficult features
like pagination because reducer can be nested.
Because of the transactional nature of the actions you
can go back and forward and recreate the state at a
specific point in time.

13. 9 February 2017 13
React/Redux developer tools.
Change reducers on the fly.
See the history of the state.
See the state being recalculated.

14. 9 February 2017 14
No dispatcher.
No store registration.
No tricky async code to debug.
Just 99 lines of code you can read.

15. 9 February 2017 15

16. 9 February 2017 16

17. 9 February 2017 17
Given the same input, will always return the same
output.
Side-effect-less (doesn’t mutate input or external state).
Relies on no external state.

18. 9 February 2017 18

19. 9 February 2017 19

20. 9 February 2017 20

21. 9 February 2017 21
An action / action creator should contains only the
tiny bit of data required for the operation.

22. 9 February 2017 22

23. 9 February 2017 23
They are pure functions
Given the state and the action, they return the
new state.
Should be the single source of truth.

24. 9 February 2017 24
Reducers should never store functions.
In the reducer you should always return a new
object.
If you have nested objects you would need to
nest Object.assign().

25. 9 February 2017 25
Where possible your state should be flat
dictionaries and should contain atomic data
(BCNF).
The store should not implement UI specific logic
so it will be reusable.

26. 9 February 2017 26

27. 9 February 2017 27

28. 9 February 2017 28

29. 9 February 2017 29

30. 9 February 2017 30

31. 9 February 2017 31

32. 9 February 2017 32

33. 9 February 2017 33

34. 9 February 2017 34

35. 9 February 2017 35

36. 9 February 2017 36

37. 9 February 2017 37

38. 9 February 2017 38

39. 9 February 2017 39
Presentational Components Container Components
Purpose
How things look (markup,
styles)
How things work (data
fetching, state updates)
Aware of Redux No Yes
To read data Read data from props Subscribe to Redux state
To change data Invoke callbacks from props Dispatch Redux actions
Are written By hand
Usually generated by React
Redux

41. 9 February 2017 41

42. 9 February 2017 42
redux-thunk, redux-saga, redux-observable, etc...
Action Middleware Reducer

43. 9 February 2017 43

44. 9 February 2017 44

45. 9 February 2017 45