Redux Middleware

A DIY Guide

@abinavseelan

Abinav Seelan

@abinavseelan

@abinavseelan

Web Engineer

blog.campvanilla.com

πŸŽ‰πŸ€“

Refresher πŸ›€πŸ»

Redux is a

state management library

Core Principles

  • Single Source of truth

  • State is read-only

  • Modifications to the state occur through pure functions

To paint a picture... πŸ‘¨πŸ»β€πŸŽ¨

Actions

View

Dispatch

State

Store

Reducers

Let's build a quick store. πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’»

https://goo.gl/vGFvAM

Where does middleware fit in? πŸ€”

Actions

View

Dispatch

State

Store

Reducers

Middleware

MiddlewareΒ πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’»



// Middleware format

function(store) {
    return function(next) {
        return function(action) {

            // middleware logic
        }
    }
}
// Middleware format

const awesomeMiddleware = (store) => (next) => (action) {
    // Do something with `store` and `action`

    // Call next(action) once you're done!
    next(action);   
}

This looks familiar! 🀯




// It's similar to express.js middleware!

app.use((request, response, next) => {
    // do something with request and response

    // call next once you're done.
    next(request, response);
});

Why is there so much currying?πŸ€”

A pretty detailed explanation https://goo.gl/MZ4KsF

tl;dr

Allows applyMiddleware() to independently pass the store and then compose the list of middleware

Source Code: https://goo.gl/6FoZEX

Let's build a middleware!Β πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’»

Some use-case examples

  • Analytics

  • Loading animation

  • Stop action before it reaches the reducer

  • Syncing state with localstorage or the serverΒ 

That's all folks! πŸš€

@abinavseelan

@abinavseelan

blog.campvanilla.com

Full Article: https://goo.gl/BoLzs8

Redux Middleware - A DIY Guide

By Abinav Seelan

Redux Middleware - A DIY Guide

Slides for the session on building your own redux middleware held at ReactJS Bangalore. https://www.meetup.com/ReactJS-Bangalore/events/244815606/

  • 1,550