Advanced Async in Redux Talk

Transcript

1. Advanced Async in Redux
2. Freddy Rangel Senior Front End Software Engineer • Senior Front End Software Engineer @ HelloSign • Author of “React Under the Hood” and the upcoming book “Hacking the Front End Interview” • Contributor to popular open source projects such as ReactJS and Redux • Google me Advanced Async in Redux ForwardJS
3. TL;DR We’ve figured out how to organize the UI, but we’re still trying to figure out the best way to do async. In Redux, thunks, promises, observables, generators, and other patterns are our options. Advanced Async in Redux ForwardJS
4. The JavaScript Cambrian Explosion Advanced Async in Redux ForwardJS
5. • Lots of change over the last decade on the front end • In fact, this is a really good thing • It’s slowing down and will continue to slow down. This is also a good thing The JavaScript Cambrian Explosion Advanced Async in Redux ForwardJS
6. React Won in the UI but It's Not a Full Architecture Advanced Async in Redux ForwardJS
7. • React is great for building the UI. It’s not so great for other things. • Separate concerns — React should just be your view layer • Core business logic should be kept outside of UI components React Won in the UI but It's Not a Full Architecture Advanced Async in Redux ForwardJS
8. Flux Pattern for State Management Advanced Async in Redux ForwardJS
9. Redux Mostly Won as a State Container Advanced Async in Redux ForwardJS
10. • Manages state changes via pure functions • Follows a uni-directional data flow similar to React • Removes business logic out of your React views • Very small (only 300 lines of code) Redux: Pros Advanced Async in Redux ForwardJS
11. • Redux is a workflow, not a complete architecture • Doesn’t have an out of the box async story • You need to build an architecture on top of Redux to handle async • Good news is, Redux has a way to be extended via middleware Redux: Cons Advanced Async in Redux ForwardJS
12. Redux Middleware for Async Advanced Async in Redux ForwardJS
13. • A third-party extension point between dispatching an action and the moment it reaches the reducer. • Uses currying to allow you to create custom dispatch functions (middleware) that are called sequentially in between dispatching and the reducer • Essentially, you can hook into the dispatcher with a chain of functions Redux Middleware Advanced Async in Redux ForwardJS
14. Advanced Async in Redux ForwardJS
18. Why Middleware? Advanced Async in Redux ForwardJS
19. • We can keep the ease of debugging with Redux and build on top of that with middleware. • We can use the Redux store to track the state of async operations, but middleware manages operation of async operations. Why Middleware? Advanced Async in Redux ForwardJS
20. Flavors of Redux Async Middleware Advanced Async in Redux ForwardJS
21. Redux Thunk Advanced Async in Redux ForwardJS
22. • Redux’s documentation recommends using redux-thunk middleware. • A thunk is a function that wraps an expression to delay its evaluation. • Normal actions are objects. redux-thunk allows you to dispatch a function which will be called by redux-thunk middleware. • redux-thunk will pass in dispatcher and getState functions so you can dispatch an action within a thunk Redux Thunk Advanced Async in Redux ForwardJS
23. Advanced Async in Redux ForwardJS
26. Advanced Async in Redux ForwardJS
29. Lets Look at Some Source Code Advanced Async in Redux ForwardJS
30. Advanced Async in Redux ForwardJS
33. • Very simple abstraction. You can write this yourself without the need of a library. • Works well for small projects. Redux Thunk: Pros Advanced Async in Redux ForwardJS
34. • Doesn’t scale as a project size scales • Spreads async logic across multiple parts of the application • Not FSA compliant • No way to cancel a dispatched thunk • Not very good at handling streams of data from sources such as a web socket Redux Thunk: Cons Advanced Async in Redux ForwardJS
35. Promise Middleware Advanced Async in Redux ForwardJS
36. • Similar to thunk middleware • Since promises are made for async, it’s a more logical choice • Use pburtchaell/redux-promise-middleware. It’s the best one out there with good conventions. Promise Middleware Advanced Async in Redux ForwardJS
37. Observables and RxJS Advanced Async in Redux ForwardJS
38. • Reactive extensions for JavaScript. • If Function Reactive Programing (FRP) is your thing, this is the library for you. • It’s a robust abstraction, but it doesn’t feel like it belongs in JavaScript. • It’s a DSL is massive and confusing. • Many incredibly intelligent people are fans of RxJS. • Kind of clunky to use with Redux. RxJS Advanced Async in Redux ForwardJS
39. Generators and Redux Saga Advanced Async in Redux ForwardJS
40. • A Redux implementation of the Saga Pattern. • Based on generators. • Used at HelloSign in production for nearly a year. • Instead of dispatching Thunks, you create Sagas to gather all your Side Effects logic in a central place. • This means application logic lives in 2 places • Reducers are responsible for handling state transitions between actions. • Sagas are responsible for orchestrating complex/asynchronous operations. Redux Saga Advanced Async in Redux ForwardJS
41. • Saga is a failure management pattern. • Sagas are multiple workflows, each providing compensating actions for every step of the workflow where it can fail. • You can think of Sagas as daemons, a long living process for orchestrating transactions and handling recovery from failures. The Saga Pattern Advanced Async in Redux ForwardJS
48. • Takes async as an important part of your architecture. • Turns your async code almost into a reducer. • You can find all your async code in one place. • Explicit handling of failure states. • Generators are part of the language, unlike observables. • Can write async code that looks synchronous • No dependency injection or mocking/stubbing needed for testing. Redux Saga: Pros Advanced Async in Redux ForwardJS
49. • Most tutorials / explanations of generators are terrible. • The internals are stable but a little complicated. • If you’re targeting older browsers you’ll need a generator runtime Redux Saga: Cons Advanced Async in Redux ForwardJS
50. Conclusion Advanced Async in Redux ForwardJS
51. • In Redux, thunks, promises, observables, generators, and other patterns are our options. • So far, redux-saga is our most robust option, and redux-thunk by far the most simple. Conclusion Advanced Async in Redux ForwardJS
52. Thanks! Advanced Async in Redux ForwardJS
53. Freddy Rangel • Stay tuned for “Hacking the Front End Interview” • @frangel85 • Github: freddyrangel Advanced Async in Redux ForwardJS Freddy Rangel Senior Front End Software Engineer