Redux Middleware

This is a version of a presentation I gave for a developer Lunch & Learn at 7Geese in Vancouver, BC.

Transcript

1. + middleware +
3. + + + + + + thunk saga the roadmap
4. …if all you have is a hammer These techniques are NOT mutually exclusive! They can be combined, or used side-by-side. They’re all just different tools at your disposal.
5. +
7. redux is a predictable state container for JavaScript apps photo credit: http://makeitopen.com/tutorials/building-the-f8-app/data/
8. photo credit: css-tricks.com
9. + + thunk
10. What the f*&! is a thunk?!
12. Redux Middleware thunks + sagas + redux-observable they’re all
16. PRO CON simple, and easy to use when things get complicated, you can get into “callback hell”
17. + + saga
18. What the f*&! is a saga?!
19. Redux-saga is middleware for side effects, doing asynchronous things like data fetching and impure things. It uses ES6 generators under the hood.
20. The mental model is that a saga is like a separate thread in your application (acting like a process manager) that's solely responsible for side effects.
21. PRO CON makes asynchronous code look procedural a little verbose, imho super testable code gets complicated quickly
22. + +
23. wat? Middleware for managing side effects in Redux apps based on RxJS. It turns all of your Redux actions into an observable stream. It really shines when async operators are very complex.
26. why are observables cool, again?
27. The middleware calls subscribe under the hood, and dispatches any actions that are on the output stream of an epic.
28. The answer to this is pretty simple: Redux has a well defined existing pattern and guidance for use within React. More importantly, Redux has a lot of nice community-driven tooling that we wanted to be able to take advantage of. At the end of the day, it doesn’t matter if the reducers are run via an Rx `scan` or Redux. What matters is the productivity and performance and Redux and Redux’s tooling provides those two things well. – Ben Lesh
29. PRO CON manage complex async operations with observables can be a real mindf**k
30. .unsubscribe()