Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Redux Middleware

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
Tweet

More Decks by Kevin Salter

Other Decks in Technology

Transcript

  1. …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.
  2. +

  3. redux is a predictable state container for JavaScript apps photo

    credit: http://makeitopen.com/tutorials/building-the-f8-app/data/
  4. PRO CON simple, and easy to use when things get

    complicated, you can get into “callback hell”
  5. Redux-saga is middleware for side effects, doing asynchronous things like

    data fetching and impure things. It uses ES6 generators under the hood.
  6. 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.
  7. PRO CON makes asynchronous code look procedural a little verbose,

    imho super testable code gets complicated quickly
  8. + +

  9. 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.
  10. The middleware calls subscribe under the hood, and dispatches any

    actions that are on the output stream of an epic.
  11. 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