The slides from my Redux patterns talk at JSheroes conference April 2018. You can find the code here: https://github.com/thinking-in-redux/redux-patterns-workshop In this talk I'm discussing messaging design patterns for event driven programming in Redux

1. THINKING
IN REDUX
Nir Kaufman
Patterns & techniques

2. @nirkaufman
Google Developer Expert for Web tech
Principal FE developer at 500Tech
Community addicted
Nir Kaufman

3. 1997
CD-ROM Included !
https://goo.gl/ZcpHZt

4. CQSCommand Query Separation

5. Command–query separation (CQS)
Every method should either be
a command that performs an action,
or a query that returns data to the
caller, but not both
- Meyer, Bertrand.

6. Command–query separation (CQS)
Every method should either be
a command that performs an action,
or a query that returns data to the
caller, but not both.
- Meyer, Bertrand.

7. Command–query separation (CQS)
Asking a question
should not change the answer.
“
- Meyer, Bertrand.

8. Command–query separation (CQS)
Commands
Change the state of a system,
but do not return a value.
- Martin Fowler.

9. Command–query separation (CQS)
Commands
Change the state of a system,
but do not return a value.
- Martin Fowler.

10. Command–query separation (CQS)
Queries
Return a result and do not change
the observable state of the system.
- Martin Fowler.

11. Command–query separation (CQS)
Queries
Return a result and do not change
the observable state of the system.
- Martin Fowler.

12. Command–query separation (CQS)
Dispatcher StateCommands
Queries

13. Redux
UI StoreActions
Selectors

14. CQS & Redux
Separate methods that change
state from those that don't.

15. 2003
https://goo.gl/ZcpHZt
65 Messaging Patterns

16. Enter Redux

17. Redux is a front-end oriented
Lean implementation of a
messaging system.

18. Redux Store
UI
Middleware
Reducers
Action
Creators
Selectors
View
Action
Action
State

19. It’s all about
Action processing.

20. ACTION IN ACTION OUT

21. Middleware Reducers
Action
Creators
Action Action
State

22. Programming with Actions

23. Command Event Document

24. Command Event Document
Ask for something

25. Command Event Document
Something happened

26. Command Event Document
Write data to the state

27. FETCH_BOOKS
API_REQUEST
SET_LOADER
API_SUCCESS
API_ERROR
SET_LOADER
SET_BOOKS
SET_LOADER
SET_NOTIFICATION

28. FETCH_BOOKS API_REQUEST
API_SUCCESS
API_ERROR
SET_LOADER
SET_LOADER
SET_LOADER
SET_BOOKS
SET_NOTIFICATION

29. Action Types
1
Action Creators
2
Reducers
3

30. FETCH_BOOKS API_REQUEST
API_SUCCESS
API_ERROR
SET_LOADER
SET_LOADER
SET_LOADER
SET_BOOKS
SET_NOTIFICATION

31. From Command to Document

32. The Middleware

33. Action processing patterns
Middleware

34. Redux flow
Middleware Reducers
Action
Creators
State

35. Filter Map Split
Enrich Normalize TranslateCompose
Actions Processing Patterns
Aggregate

36. Two types of middleware
Core Application
Generic and reusable Describe a specific flow
Single Responsibility Principal

37. FETCH_BOOKS API_REQUEST
API_SUCCESS
API_ERROR
SET_LOADER
SET_LOADER
SET_LOADER
SET_BOOKS
SET_NOTIFICATION

38. The Books Middleware
FETCH_BOOKS API_REQUEST SET_LOADER
Filter & Split

39. The API Middleware
API_REQUEST
API_SUCSSES
API_ERROR
API_ON_PROGRESS
Filter & Map

40. Complete the flow
API_SUCCESS (books) SET_BOOKS SET_LOADER
API_ERROR (books) SET_NOTIFICATION SET_LOADER
Split

41. Filter Map Split
Action Routing Patterns
K K K
Integrity Key

42. The Multi Middleware
dispatch

43. The Logger Middleware
REACT_APP_ENV

44. Action Transformation Patterns
context & content
Enrich Normalize

45. Our Core Middleware Pipe
multi
api
logger

46. The Normalize Middleware
content transform
SET_BOOKS SET_BOOKS NORMALIZE

47. Summary

48. Redux is a front-end oriented
Lean implementation of a
messaging system.

49. Programming with Actions

50. Supporting Libraries
A practical functional library
for JavaScript
An API for async programming with
observable streams

51. Recommended reading

52. My book

53. Thank you!