Async Redux Actions With RxJS

on YouTube ↗35m

" summary

Shows how redux-observable middleware wires RxJS observables into Redux as “epics” that take streams of actions and return action streams, using switchMap for implicit XHR cancellation and takeUntil for declarative aborts. Demonstrates debounce-on-type autocomplete, client-side rate limiting of clicks, and multiplexed WebSocket subscription with reconnect and reference counting. Claims much less imperative glue, works with Redux tooling, but notes a learning curve—RxJS has “60+ operators” though about eight to twelve cover most cases.

AI-written summary · about

" chapters (21)

1. 0:00Intro
2. 0:13REACT RALLY
3. 2:02What's a reducer?
4. 2:27Reducers in Redux
5. 7:44Callbacks
6. 8:14Callback Hell (aka "the flying V")
7. 8:34Promises provide a cleaner solution
8. 9:50Why cancellation is important
9. 14:34Times are changing
10. 17:41Subscribing to an observable
11. 22:08Async in redux without middleware
12. 22:48Async in redux with middleware (and react-redux)
13. 23:47Let's combine RxJS and redux!
14. 24:43What's an "Epic"?
15. 25:38Basic middleware setup
16. 26:45Idiomatic redux increment decrement with added debounce
17. 28:24Auto-Complete Plain JS
18. 29:53Multiplexed Socket Plain JS
19. 31:15Multiplexed Socket Epic
20. 31:51The Good
21. 34:49Co-Author Jay Phelps

" related talks

• 23mHow we’re embracing functional programming to build a large SPAAnton Abilov · JSConf US 2019
• 36mRxJS: A Better Way to Write Frontend ApplicationsHannah Howard · JSConf US 2018
• 51mRedux, beyond ReactAaron Powell · NDC Sydney 2017
• 49mRedux, beyond ReactAaron Powell · NDC London 2017
• 30mRxJS in React, RxJS in Angular and Why We Should All Be FriendsValentyn Barmashyn · OdessaJS 2018
• 42mReactive JavaScript with RxJSMaximilian Berghoff · FrOSCon 2016
• 42mRedux-ing like a ProBoris Dinkevich · Codemotion Amsterdam 2016
• 27mEmbrace Reactive Programming in React and Vue with RxJSFahad Ibnay Heylaal · Amsterdam JSNation Conference 2018