Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Redux pattens - JSHeroes 2018

659 views

Published on

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

Published in: Technology

Redux pattens - JSHeroes 2018

  1. 1. THINKING IN REDUX Nir Kaufman Patterns & techniques
  2. 2. @nirkaufman Google Developer Expert for Web tech Principal FE developer at 500Tech Community addicted Nir Kaufman
  3. 3. 1997 CD-ROM Included ! https://goo.gl/ZcpHZt
  4. 4. CQSCommand Query Separation
  5. 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. 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. 7. Command–query separation (CQS) Asking a question should not change the answer. “ - Meyer, Bertrand.
  8. 8. Command–query separation (CQS) Commands Change the state of a system, but do not return a value. - Martin Fowler.
  9. 9. Command–query separation (CQS) Commands Change the state of a system, but do not return a value. - Martin Fowler.
  10. 10. Command–query separation (CQS) Queries Return a result and do not change the observable state of the system. - Martin Fowler.
  11. 11. Command–query separation (CQS) Queries Return a result and do not change the observable state of the system. - Martin Fowler.
  12. 12. Command–query separation (CQS) Dispatcher StateCommands Queries
  13. 13. Redux UI StoreActions Selectors
  14. 14. CQS & Redux Separate methods that change state from those that don't. 
  15. 15. 2003 https://goo.gl/ZcpHZt 65 Messaging Patterns
  16. 16. Enter Redux
  17. 17. Redux is a front-end oriented Lean implementation of a messaging system.
  18. 18. Redux Store UI Middleware Reducers Action Creators Selectors View Action Action State
  19. 19. It’s all about Action processing.
  20. 20. ACTION IN ACTION OUT
  21. 21. Middleware Reducers Action Creators Action Action State
  22. 22. Programming with Actions
  23. 23. Command Event Document
  24. 24. Command Event Document Ask for something
  25. 25. Command Event Document Something happened
  26. 26. Command Event Document Write data to the state
  27. 27. FETCH_BOOKS API_REQUEST SET_LOADER API_SUCCESS API_ERROR SET_LOADER SET_BOOKS SET_LOADER SET_NOTIFICATION
  28. 28. FETCH_BOOKS API_REQUEST API_SUCCESS API_ERROR SET_LOADER SET_LOADER SET_LOADER SET_BOOKS SET_NOTIFICATION
  29. 29. Action Types 1 Action Creators 2 Reducers 3
  30. 30. FETCH_BOOKS API_REQUEST API_SUCCESS API_ERROR SET_LOADER SET_LOADER SET_LOADER SET_BOOKS SET_NOTIFICATION
  31. 31. From Command to Document
  32. 32. The Middleware
  33. 33. Action processing patterns Middleware
  34. 34. Redux flow Middleware Reducers Action Creators State
  35. 35. Filter Map Split Enrich Normalize TranslateCompose Actions Processing Patterns Aggregate
  36. 36. Two types of middleware Core Application Generic and reusable Describe a specific flow Single Responsibility Principal
  37. 37. FETCH_BOOKS API_REQUEST API_SUCCESS API_ERROR SET_LOADER SET_LOADER SET_LOADER SET_BOOKS SET_NOTIFICATION
  38. 38. The Books Middleware FETCH_BOOKS API_REQUEST SET_LOADER Filter & Split
  39. 39. The API Middleware API_REQUEST API_SUCSSES API_ERROR API_ON_PROGRESS Filter & Map
  40. 40. Complete the flow API_SUCCESS (books) SET_BOOKS SET_LOADER API_ERROR (books) SET_NOTIFICATION SET_LOADER Split
  41. 41. Filter Map Split Action Routing Patterns K K K Integrity Key
  42. 42. The Multi Middleware dispatch
  43. 43. The Logger Middleware REACT_APP_ENV
  44. 44. Action Transformation Patterns context & content Enrich Normalize
  45. 45. Our Core Middleware Pipe multi api logger
  46. 46. The Normalize Middleware content transform SET_BOOKS SET_BOOKS NORMALIZE
  47. 47. Summary
  48. 48. Redux is a front-end oriented Lean implementation of a messaging system.
  49. 49. Programming with Actions
  50. 50. Supporting Libraries A practical functional library for JavaScript An API for async programming with observable streams
  51. 51. Recommended reading
  52. 52. My book
  53. 53. Thank you!

×