# Building Redux Middleware

DevFeed: [Building Redux Middleware](<https://devfeed.tech/articles/building-redux-middleware-21867.md>)

Original publisher: [Read original article](<https://reactjsnews.com/redux-middleware>)

Author: Zach Silveira

Published: 2016-03-13T23:00:09Z

Content type: tutorial

Language: en

Sources: [ReactJS News](<https://devfeed.tech/sources/reactjs-news.md>)

Topics: [Redux](<https://devfeed.tech/topics/redux.md>), [API](<https://devfeed.tech/topics/api.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [building](<https://devfeed.tech/tags/building.md>), [callback](<https://devfeed.tech/tags/callback.md>), [function](<https://devfeed.tech/tags/function.md>), [guide](<https://devfeed.tech/tags/guide.md>), [middleware](<https://devfeed.tech/tags/middleware.md>), [react](<https://devfeed.tech/tags/react.md>), [redux](<https://devfeed.tech/tags/redux.md>), [request](<https://devfeed.tech/tags/request.md>), [state](<https://devfeed.tech/tags/state.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

## AI overview

A tutorial on building Redux middleware. It explains middleware as a chain of functions, shows how to apply custom middleware, filters actions by type, and demonstrates handling a POST request before invoking a callback.

## Source excerpt

After writing my post a few months ago on building your own redux app, I have been asked a couple times to write a guide on creating redux middleware and how it works. This will be a quick post on how you can acheive anything with your own middleware! ##Basic middleware const customMiddleware = store => next => action => { if(action.type !== 'custom') return next(action) //do stuff! } Applying it: import { createStore, applyMiddleware, } from 'redux' import reducer from './reducer' import customMiddleware from './customMiddleware' const store = createStore( reducer, applyMiddleware(customMiddleware) ) Whaaa? store => next => action => I know that looks confusing. Essentially you are building a chain of functions, it will look like this when it gets called: //next looks something like this: let dispatched = null let next = actionAttempt => dispatched = actionAttempt const dispatch = customMiddleware(store)(next) dispatch({ type: 'custom', value: 'test' }) All you are doing is chaining function calls and passing in the neccesary data. When I first saw this I was confused a little due to the long chain, but it made perfect sense after reading the article on writing redux tests. So now that we understand how those chained functions work, let's explain the first line of our middleware. if(action.type !== 'custom') return next(action) There should be some way to tell what actions should go through your middleware. In this example, we are saying if the action's type is not custom call next, which will pass it to any other middleware and then to the reducer. ##Doing Cool stuff The official guide on redux middleware covers a few examples on this, I'm going to try to explain it in a more simple way. Say we want an action like this: dispatch({ type: 'ajax', url: 'http://api.com', method: 'POST', body: state => ({ title: state.title description: state.description }), cb: response => console.log('finished!', response) }) We want this to do a post request, and then call the cb fu