Redux Middleware

C3a44402b29aebcf9f28ae9242545ae7?s=47 Kevin Salter
November 14, 2016

Redux Middleware

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


Kevin Salter

November 14, 2016


  1. + middleware +

  2. None
  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. +

  6. None
  7. redux is a predictable state container for JavaScript apps photo

  8. photo credit:

  9. + + thunk

  10. What the f*&! is a thunk?!

  11. None
  12. Redux Middleware thunks + sagas + redux-observable they’re all

  13. None
  14. None
  15. None
  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.
  24. None
  25. None
  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()