This document summarizes different libraries for handling side effects in Redux applications. It discusses Redux Thunk, Redux Effects, Redux Side Effects, Redux Side Effects, Redux Saga, and Redux Observable. Redux Observable uses RxJS to compose and cancel async actions to create side effects. An example Epic function is provided that takes a stream of actions and returns a stream of actions. The document concludes with a thank you and contact information.

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