State Management in Angular with NgRx Stores and Effects

State Management in Angular with NgRx Stores and Effects

Slides for my talk about State Management in Angular with NgRx Stores and Effects at the International Javascript Conference in London.

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

May 14, 2019
Tweet

Transcript

  1. @FabianGosebrink Angular state management

  2. @FabianGosebrink

  3. @FabianGosebrink

  4. @FabianGosebrink

  5. @FabianGosebrink

  6. @FabianGosebrink

  7. @FabianGosebrink REST-Service <component>

  8. @FabianGosebrink REST-Service <component> <component> <component> <component> <component> <component> <component> <component>

  9. @FabianGosebrink REST-Service <component> <component> <component> <component> <component> <component> <component> <component>

  10. @FabianGosebrink

  11. @FabianGosebrink REST-Service <component> <component> <component> <component> <component> <component> <component> <component>

  12. @FabianGosebrink

  13. @FabianGosebrink

  14. @FabianGosebrink

  15. @FabianGosebrink

  16. @FabianGosebrink

  17. @FabianGosebrink <content> <list> <form>

  18. @FabianGosebrink

  19. @FabianGosebrink REST- Service <content> <list> <form>

  20. @FabianGosebrink REST- Service <content> <list> <form>

  21. @FabianGosebrink REST- Service <content> <list> <form>

  22. @FabianGosebrink REST- Service <content> <list> <form> @Input() @Input()

  23. @FabianGosebrink

  24. @FabianGosebrink

  25. @FabianGosebrink REST- Service <content> <list> <form> @Output() @Output()

  26. @FabianGosebrink

  27. @FabianGosebrink

  28. @FabianGosebrink

  29. @FabianGosebrink REST- Service <content> <list> <form>

  30. @FabianGosebrink

  31. @FabianGosebrink

  32. @FabianGosebrink

  33. @FabianGosebrink State

  34. @FabianGosebrink Where

  35. @FabianGosebrink Change

  36. @FabianGosebrink Effects

  37. @FabianGosebrink

  38. @FabianGosebrink Component Services

  39. @FabianGosebrink

  40. @FabianGosebrink

  41. @FabianGosebrink

  42. @FabianGosebrink Component

  43. @FabianGosebrink

  44. @FabianGosebrink

  45. @FabianGosebrink

  46. @FabianGosebrink

  47. @FabianGosebrink

  48. @FabianGosebrink Component

  49. @FabianGosebrink Store Component

  50. @FabianGosebrink Store Component store.dispatch(new LoadAllTodosAction())

  51. @FabianGosebrink Store Component Reducer store.dispatch(new LoadAllTodosAction())

  52. @FabianGosebrink

  53. @FabianGosebrink (oldState, action) => newState

  54. @FabianGosebrink

  55. @FabianGosebrink

  56. @FabianGosebrink Store Component store.dispatch(new LoadAllTodosAction()) State { … } Reducer

  57. @FabianGosebrink Store Component State { … } Reducer store.select(…) store.dispatch(new

    LoadAllTodosAction())
  58. @FabianGosebrink Container component Presentational component store.select(…) @Input(…) store.dispatch(…) @Output(…)

  59. @FabianGosebrink

  60. @FabianGosebrink

  61. @FabianGosebrink Store Component store.dispatch(new LoadAllTodosAction()) State { … } Reducer

    store.select(…) Effects
  62. @FabianGosebrink Store Component store.dispatch(new LoadAllTodosAction()) State { … } Reducer

    store.select(…) Effects Services
  63. @FabianGosebrink

  64. @FabianGosebrink

  65. @FabianGosebrink

  66. @FabianGosebrink

  67. @FabianGosebrink { … }

  68. @FabianGosebrink { }

  69. @FabianGosebrink

  70. @FabianGosebrink

  71. @FabianGosebrink { todoFeature: { // … } }

  72. @FabianGosebrink { todoFeature: { items: [], selectedItem: null, loading: false

    } }
  73. @FabianGosebrink

  74. @FabianGosebrink

  75. @FabianGosebrink

  76. @FabianGosebrink

  77. @FabianGosebrink

  78. @FabianGosebrink

  79. @FabianGosebrink

  80. @FabianGosebrink

  81. @FabianGosebrink

  82. @FabianGosebrink

  83. @FabianGosebrink

  84. @FabianGosebrink Fabian Gosebrink http://offering.solutions http://github.com/FabianGosebrink http://fabian-gosebrink.com