This document provides an overview and introduction to Predictable Reactive State Management using NGRX. It begins with an introduction to the speaker and then outlines the schedule which includes topics like functional programming, RxJS, Angular change detection, Redux, and NGRX. It then discusses how functional programming concepts like pure functions, immutable data, and declarative programming relate to Angular and libraries like RxJS and NGRX. Specific NGRX concepts like actions, reducers, and selectors are introduced. Examples are provided for building an NGRX application with a single reducer handling the state updates. Additional resources are listed at the end.

1. Predictable Reactive State Management - NGRX

2. About me: {
"name": "Ilia Idakiev",
"experience": [
"Lecturer in 'Advanced JS' @ FMI",
"Developer / Manager / Owner @ HNS",
"Project Consulting",
"Angular 2 Course @ HackBulgaria 2016",
"Angular 2 Course @ HackBulgaria 2017",
"Organizing and Lecturing Private Courses"
],
"involvedIn": [ "SofiaJS", "BeerJS" ]
}

3. Schedule
1. Functional programming.
2. Functional concepts.
3. Category Theory.
4. Observer and Iterator pattern overview.
5. RxJS
6. Change Detection
7. Redux
8. NGRX

4. Functional Programming and
Angular?
1. RXJS
2. NGRX

5. Functional Programming
Functional programming is a programming
paradigm that treats computation as the
evaluation of mathematical functions and
avoids changing-state and mutable data. It
is a declarative programming paradigm,
which means programming is done with
expressions or declarations instead of
statements.

6. Declarative vs Imperative

7. Functional Programming Advantages
• Clean code - easier to test, debug and reason about.
• Modularity - large problems are broken into small parts
• Reusability - common helper functions, due to the modularity
• Reduced coupling - Less amount of dependency between
modules

8. Functional JavaScript

9. JS array methods we need to know
• map(fn) - fn will be called for each element of the array with args:
(currentValue, index, array) and the returned value will be the new
element in the result array.
• filter(fn) - fn will be called for each element and it needs to return true if
the current value should be added to the result array and false
otherwise.
• reduce(accFn, acc) - accFn will be called for each element of the array
with argumenst (accumulator, currentValue, index). If its the first call
accumulator will be acc from the reduce call. Otherwise it will be the
previously returned result from the accFn.

10. Example

11. Functional concepts
• Using functions and arrays for flow control
• Pure functions, arrow functions, anonymous functions, recursive functions
• Functions as First Class Citizens
• Using: map(), filter() and reduce()
• Currying and Partial Application
• Lazy evaluation
• Composition (Math)

12. Referential Transparency

13. Referential Transparency
An expression is said to be referentially transparent if it
can be replaced with its corresponding value without
changing the program's behavior.

14. Pure Functions
• The function always evaluates the same result value given the
same argument value(s)
• Evaluation of the result does not cause any semantically
observable side effect or output, such as mutation of mutable
objects or output to I/O devices

15. Functions - First Class Citizens
• Functions can be assigned to variables
• Functions can be passed as arguments

16. Lazy evaluation
• Call-by-need and deffered execution, is an evaluation strategy
that waits until the value is needed to compute the result of a
function.
• Using it can result in a major increase in performance

17. Currying and Partial Application
• Currying is the technique of translating the evaluation of a
function that takes multiple arguments into evaluating a
sequence of functions.
• Partial application refers to the process of fixing a number of
arguments to a function, producing another function of
smaller arity.

18. Example (1)

19. Example (2)

20. Curry Function

21. Category Theory

22. Categories
Sets with the same type
numbers, strings, arrays, dates, objects, booleans, etc.

23. Morphisms
Pure functions - mappings between types

24. Functors
Functors are mappings between categories.
Functions that lift values out of a container, morph them, and put them into a
new container.
The first input is a morphism for the type and the second input is the container.

25. Functors

26. Monads
Monads are structures that are used as containers and they help
you compose functions.

27. Maybe Monad

28. Maybe with explicit composition

29. Maybe composition

30. Promises

31. Promises
Implement map and flatMap through then, so it is a functor and a
monad

32. Resources
https://github.com/fantasyland/fantasy-land
http://ramdajs.com/
http://folktalejs.org/

33. Iterator Pattern

34. Iterator Pattern
• Used for traversing collections of objects
• It provides a simple method for selecting,
sequentially, the next item in the
collection.
• An iterator can be used to generate
values

35. Iterator Pattern

36. ES2015 Iterator

37. Observer Pattern

38. Observer Pattern
• Used to notify observers when the value
on an object has changed.

39. Reactive Extensions
http://reactivex.io

40. Reactive Extensions
• Library for composing asynchronous and event-based programs
by using observable sequences.
• Extends the observer pattern to support sequences of data and/
or events
• Adds operators that allow you to compose sequences together
declaratively

41. RxJS
• Original Project: https://github.com/Reactive-Extensions/RxJS
• Rewrite: https://github.com/ReactiveX/rxjs
(better performance, better modularity, better debuggable call
stacks, while staying mostly backwards compatible, with some
breaking changes that reduce the API surface)

42. Angular & RxJS
• Routing
• Forms Validation
• State Management
• Http Service

43. Example

44. Promises vs Observables
• Observables are lazy
• Promises emit only one value
• We can cancel an observable

45. Example (2)

46. Example (3)

47. Example (4)

48. Operators and Observables
• https://github.com/Reactive-Extensions/RxJS/tree/
8fa95ac884181fb6cbff8ce7c1d669ffb190f5e4/src/modular/
observable
https://github.com/Reactive-Extensions/RxJS/tree/
8fa95ac884181fb6cbff8ce7c1d669ffb190f5e4/src/core/perf/operators

49. http://rxmarbles.com
http://jaredforsyth.com/rxvision/examples/playground/
Resources

50. Change Detection in Angular

51. zone.js
• Monkey patches the world - every single async api
• Provides context
The zone is an execution context that is passed to the callback
function of the async operation and when the callback is executed
the zone is alerted about the change.
($digest)
https://github.com/angular/zone.js/blob/master/lib/browser/browser.ts

52. Application State Change
• Events - click, submit, …
• XHR (Ajax) - Fetching data from a remote server
• Timers - setTimeout(), setInterval()

53. Change Detection Mechanism
Every Component has an change detector and what it does is:
1. When a change occurs the change detector compares for each
expression in the template the current value of the property
used in the expression with the previous value.
2. If the property value before and after is different, it sets
isChanged to true.

54. Change Detection

55. Change Detection

56. Change Detection

57. Change Detection

58. Angular 2 generates Virtual Machine (VM) friendly code
so it can perform thousands of Change Detection Runs
in milliseconds.

59. How to optimize the
Change Detection Traversal ?

60. Change Detection Strategies
• ChangeDetectionStrategy.OnPush
The change detector's mode will be set to CheckOnce during
hydration (It compares values by reference)
• ChangeDetectionStrategy.Default
The change detector's mode will be set to CheckAlways during
hydration

61. https://plnkr.co/edit/4HG4sDcdTleRXlNafETH?p=preview

62. State Management

63. Simple application
(Component - Service)

64. After one week ...

65. Components - Service

66. Things we have to manage
• Data that comes from the server and whether it's pending or
resulted in an error
• UI state like toggles, alerts and errors messages
• User input, filters and search queries
• Other

67. What changed?

68. Flux
• Flux is an architecture for creating data layers in JavaScript
applications.
• It places a focus on creating explicit and understandable
update paths for your application's data
• Helps tracing changes during development and makes bugs
easier to track down and fix

69. Flux

70. Redux
• Predictable state management
• Architecture that keeps the core principles of Flux by having
unidirectional data flow
• Redux applications have only one global, read-only
application state
• This state is calculated by "reducing" over a collection or stream
of actions that update it in controlled ways

71. Why Predictable?
Referential Transparency
Pure (Deterministic) Functions
Predictability

72. Redux Ideas
• Single State Tree
• Actions describe updates
• Reducer apply updates

73. Redux Contracts
• Reducers - Specification of how the state updates
• High Order Reducers - Functions that take reducer as argument,
take some additional arguments and return another reducer.
• Selectors - Takes the whole states and returns a derived state

74. Redux
in Angular

75. Redux
in Angular
Single responsibility?

76. Redux
in Angular

77. @ngrx

78. @ngrx/store
• Implementation of Redux for NG
• It uses RxJS Observables

79. @ngrx/effects
• Side effect model for @ngrx/store

80. @ngrx/router-store
• Bindings to connect angular/router to ngrx/store

81. @ngrx/store &
@ngrx/effects

82. Pros and cons using ngrx
1. Unidirectional data flow
2. Really helpful dev-tools (time travel)
3. Good code separation
4. Fast bug fixing due to 1, 2 and 3
5. Easier testing and reasoning due to pure functions and composition
6. Better angular performance with OnPush Strategy
7. State Serialization
8. More files and code

83. https://github.com/ngrx/store

84. Example

85. Install packages

86. Install devtools

87. Define store actions
app/store/app.actions.ts

88. Define state structure
app/store/app.reducer.ts

89. Define state
changes
app/store/app.reducer.ts

90. Create the reducer function
app/store/app.reducer.ts

91. Import store and devtools
app/store/app.module.ts

92. Create the app model
app/store/app.module.ts

93. Use the app model
app/todo-list/todo-list.component.ts

94. Use the app model
app/todo-list/todo-list.component.html

95. The reducer factory
app/store/reducer-factory.ts

96. Demo

97. Goal
• Abstract state to isolate state leaks
• Treat our program as a simple deterministic function with one
argument (the state) that results a massive mutation called DOM

98. Additional Libs
• reselect
• ngrx-store-freeze

99. ngrx resources
http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/
https://gist.github.com/btroncone/a6e4347326749f938510

100. Talks repo:
https://github.com/iliaidakiev/slides