redux-observable-preso.pdf

My talk about RxJS and redux-observable on 21st Aug 2018 at NAB.

Transcript

1. A NEW LOOK AT REDUX Make it powerful with redux-observable @blinkwalker
2. @BenLesh
6. CHANGES IN RXJS6 Simplification of import statement Becomes
7. CHANGES IN RXJS6 Becomes
8. CHANGES IN RXJS6 .pipe()
9. CHANGES IN RXJS6 So you can chain them like this
11. CHANGES IN RXJS6 catch() => catchError() do() => tap() finally() => finalize() switch() => switchAll() Operators are renamed And so does some observable-creation methods throw() => throwError() fromPromise() => from()
12. USEFUL RESOURCES • https://rxjs-dev.firebaseapp.com/guide/v6/migration • https://auth0.com/blog/whats-new-in-rxjs-6/ • https://www.youtube.com/watch?v=JCXZhe6KsxQ
13. WHAT’S REDUX? Provides predicable state management using actions and reducers
14. HOW WE NORMALLY DO IT? search-bar.component.js search-action.js
15. HOW WE NORMALLY DO IT? search-reducer.js
16. HOW WE NORMALLY DO IT? Redux-thunk - It is a function - It can accept no arguments - It returns another function
17. PAIN POINTS OF REDUX • Complex user interactions (keyboard, mouse, touchpad) • Http requests chain • Timer / Intervals / Transitions • WebSockets • Web Workers • Cancellation of requests • Repeat / Retry requests Async / Side effects functions Callback Hell
18. AND CAN RXJS HELP? Yes, we have observables and operators But…
19. WHAT’S REDUX-OBSERVABLE? Redux-observable is a RxJS based Redux middleware @_jayphelps
20. WHAT’S AN EPIC? A function that takes a stream of all actions dispatched and returns a stream of new actions to dispatch. “Actions in, actions out”
21. WHAT’S AN EPIC? • It is a factory and only gets called once • It is established along with the application and dispatch the action immediately and automatically
22. WHAT’S AN EPIC?
23. WHAT’S REDUX-OBSERVABLE? + =
24. LET’S RECAP… • Make it easier to compose and control complex async tasks, over any amount of time • Can work with existed Redux structure but adding a little bit cream on top • Can use all redux and RxJS tooling
25. DEMO https://github.com/mattyao1984/redux-observable-demo
26. QUESTIONS?