Slides for my talk @ ngPartyCZ XIV regular meetup

2. Keep your side-effects
in the right place with
redux-observable
a ngParty Regular meetup XIV talk

3. $whoami
Viliam Elischer
SW Engineer at
twitter.com/vireliam
github.com/vire
github.com/ngParty

4. Agenda
Tackle the side-effects
State of art
Redux-observable
Demo

5. Why bother with side-effects?

6. Because side-effects in
codebase might* lead to:
development slow-down
non-determinism a.k.a. bugs
hard maintenance
on-boarding

8. official react docs

9. KPIs for dealing with
side-effects?

10. 1. How painful is adding new features
2. API - developer’s experience
3. Testability
4. Maintainability / Refactoring
5. Documentation

11. State of the art
for libs handling side-effects in redux* applications

12. #1 redux-thunk
A thunk is a function that wraps an expression to delay its
evaluation.

15. Pros / Cons
(+) Easy, simple, good for beginners
(+) Good enough for small project
(+) Documentation / part of redux
(-) Complexity grows quickly (promises, dispatches)
(-) Harder to test
(-) Business logic in action creators
(-) Custom utilities - cancelation, debounce, throttle, retry
exhaustive SO explanation on redux-thunk

16. #2 Effect executors
Store (state, effects)
Reducers (state, action, effects)
Dispatch(action, effect)
Middleware(store, executor)

18. #2A redux-effects*
Not maintained anymore, complex & complicated

19. #2B redux-side-effect
Execute side effects from reducer function

21. Pros / Cons
(+) Easy to test*
(+) Sync action creators
(-) Hard to maintain
(-) Race conditions (setTimeout required)
(-) Action creators bloated wit SE logic
(-) Custom utilities - cancelation, debounce,
throttle, retry
* based on visual opinion

22. #3 salsita/redux-side-effects
“What if your reducers were generators? You could yield side
effects and return application state.”

24. Pros / Cons
(+) Declarative side effects / yield in
reducer
(+) Easy to test
(+) Documentation
(-) Generators (available under flag)
(-) Custom utilities - cancelation,
debounce, throttle, retry

25. #4 redux-saga
“The mental model is that a saga is like a separate thread in
your application that's solely responsible for side effects.”
official docs

29. Knowledge of generators concept required

30. Pros / Cons
(+) Mature
(+) Easy to test
(+) Documentation
(+) Custom utilities - cancelation, debounce,
throttle, retry
(o) Generators
(-) Ease of use
(-) Complexity

31. #4 redux-observable
“RxJS 5-based middleware for Redux. Compose and cancel
async actions to create side effects and more.”
official docs

32. Epic
core primitive of redux-observable.
a function which takes a stream of actions
and returns a stream of actions.
actions in, actions out.

33. Example

34. Implementation

37. Implementation

38. Demo

39. Q&A

40. Thank you!
@vireliam
#devsUnited

41. A. Sharif
Generators and Channels in JavaScript