Async in Redux Workshop: Module 3

Transcript

1. MODULE 3: REDUX MIDDLEWARE
2. AGENDA ▸ What is middleware? ▸ How does Redux implement the middleware pattern? ▸ Why does middleware matter for async? ▸ Implementation details ▸ Anatomy of a Redux middleware
3. WHAT IS MIDDLEWARE?
4. MIDDLEWARE ▸ Middleware is computer software that provides services to software applications beyond those available from the operating system. It can be described as "software glue”. ▸ Ruby on Rails and Koa.js have robust middleware systems so deal with requests before they’re handled by the main application ▸ Middleware on the server is used to address cross-cutting concerns like authentication, authorization, logging, gathering performance metrics, etc.
5. REDUX AND THE MIDDLEWARE PATTERN
6. REDUX AND THE MIDDLEWARE PATTERN ▸ In the case of Redux middleware the main execution task is the store’s dispatch function. ▸ The dispatch function is responsible for sending actions to one or many reducer functions for state changes. ▸ Redux middleware is designed by creating functions that can be composed together before the main dispatch method is invoked.
7. WHY DOES MIDDLEWARE MATTER FOR ASYNC?
8. ASYNC IN REDUX ▸ Out of the box, Redux is meant to be pure functions without any side effect. ▸ Async by its very nature is all about side effects: fetching / posting data, reads/ writes to localStorage, etc. ▸ To build a complete architecture, you need to use Redux middleware
9. IMPLEMENTATION DETAILS
10. IMPLEMENTATION DETAILS ▸ Redux chains together middleware you provide , passing in special functions to your each middleware along the chain ▸ It passes functions for getting the state, dispatching new actions, and calling the following middleware ▸ It is the job of your middleware to know when it’s finished and pass the action to the next middleware
15. ANATOMY OF A REDUX MIDDLEWARE
17. CURRYING
18. CURRYING ▸ A curried function can accept some of it’s arguments, returning a function that takes the remaining arguments ▸ This is useful if you want to apply an argument to a function before you have the rest of the arguments it needs ▸ Redux uses currying to chain middleware before the store is created, and to pass in functions that don’t quite exist yet.
23. OK, SO WHAT ARE THESE ARGUMENTS?
24. STORE
26. STORE ▸ For all intents and purposes it’s the actual Redux store. ▸ It’s not the actual store: rather it’s an object that contains methods from the store you might want to use ▸ You get 2 functions from this store object: getState() and dispatch()
30. NEXT
31. NEXT ▸ next() is the next middleware in the chain of middlewares. Perhaps it should have been called nextMiddleware() for clarity ▸ Only your middleware knows when it’s finished and hands over control of the action to the next middleware
34. TO LEARN MORE ▸ Learns everything you want to know about the internals of middleware from this excellent article ▸ https://medium.com/@meagle/understanding-87566abcfb7a