Chapter 5. Middleware

 

This chapter covers

  • Defining what Redux middleware is
  • Writing your own middleware
  • Composing middleware
  • Learning when to use middleware

We’ve covered most of the usual suspects you’d find in a React/Redux application: actions, reducers, and the store. To update a state in your application using Redux, you need all three. You have one more core actor that’s key to this whole operation: middleware. If you’ve spent any time in chapter 4, you’ve already come face-to-face with middleware and lived to tell the tale. When you added redux-thunk to the Parsnip project, you learned how to apply middleware to Redux using the applyMiddleware function, but not necessarily how to create your own. In this chapter, we’ll look more in depth at how middleware works, how to create it, and what use cases it can be a good fit for.

In the process, you’ll improve Parsnip by creating custom middleware for a few classic use cases:

  • Logging actions, which give us a quick look into what’s happening in the app
  • Analytics, which provide a convenient interface to track an event when an action is dispatched
  • API calls, which will abstract away common tasks around making calls to the server

Let’s get started!

5.1. What’s in middleware?

5.2. Middleware basics

5.3. Example: logging middleware

5.4. Example: analytics middleware

5.5. API middleware

5.6. Exercise

5.7. Solution

Summary

sitemap