Keep your side-effects in the right place with redux observable
0 likes1,012 views
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.
Keep your side-effects in the right place with redux observable
- 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
- 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
- 41. A. Sharif Generators and Channels in JavaScript