Published on June 27, 2016 by LearnCode.academy

Redux middleware is awesome, it allows you to keep the simplicity of Redux, yet extend it’s functionality. Adding global things like loggers, error handlers, etc are incredibly simple.

In this react redux tutorial, we’re going to create a redux logger middleware and error handling middleware that intercept every redux action in our react.js app.

As you see, adding redux middleware to our react app is incredibly easy.

Leave a Reply

111 Comments on "Redux Middleware Tutorial – Redux Tutorial #5"

Notify of
avatar

Matthew Chung
Guest
Matthew Chung
1 year 6 months ago

This is a great tutorial. Wouldn't the error handling calling next() cause the subscribe callback to get called twice, which might lead to some unnecessary processing?

Hami Dki
Guest
Hami Dki
1 year 7 months ago

Could you please explain the thunk chaining thing?

Cypher
Guest
Cypher
1 year 5 months ago

They're called "curried functions", there's a good explanation of them here:stackoverflow.com/a/32787782/1288418

Hami Dki
Guest
Hami Dki
1 year 7 months ago

Could you please explain the thunk chaining thing?

Cypher
Guest
Cypher
1 year 5 months ago

They're called "curried functions", there's a good explanation of them here:stackoverflow.com/a/32787782/1288418

Ruiwei Liang
Guest
Ruiwei Liang
1 year 7 months ago
Thank you for your tutorials. When I am trying to throw error differently than what you did in the video, some interesting things happened:Inside the reducre, you are throwing error inside if, so it works: if(action.type === "E") { throw new Error("ErrorReducer"); }However, if I try to throw error inside "else", it won't work, saying "Uncaught Error" in console:if(blabla){}else{throw new Error("Error happen")}Or, if I throw in "default" inside "switch", it won't work either:switch(action.type){ case "CHANGE_NAME":{break;} default: {throw new Error("Error happened")}}Looks like it only works when throwing error inside if. Otherwise it will force me to catch the error or it… Read more »
Ruiwei Liang
Guest
Ruiwei Liang
1 year 7 months ago
Thank you for your tutorials. When I am trying to throw error differently than what you did in the video, some interesting things happened:Inside the reducre, you are throwing error inside if, so it works: if(action.type === "E") { throw new Error("ErrorReducer"); }However, if I try to throw error inside "else", it won't work, saying "Uncaught Error" in console:if(blabla){}else{throw new Error("Error happen")}Or, if I throw in "default" inside "switch", it won't work either:switch(action.type){ case "CHANGE_NAME":{break;} default: {throw new Error("Error happened")}}Looks like it only works when throwing error inside if. Otherwise it will force me to catch the error or it… Read more »
Soi Xam
Guest
Soi Xam
1 year 9 months ago

share to be share, thanks you

Soi Xam
Guest
Soi Xam
1 year 9 months ago

share to be share, thanks you

DawsonCosmos
Guest
DawsonCosmos
1 year 9 months ago

What the heck is going on with logger? Where did that next function come from and why is the last function that is being returned the one firing and not the first function?

DawsonCosmos
Guest
DawsonCosmos
1 year 4 months ago

Samy David nailed it. thanks, Samy.

Samy David
Guest
Samy David
1 year 4 months ago

//ES6let logger = (store) => (next) => (action) =>{ }//ES5var logger = function logger(store) { return function (next) { return function (action) {}; };};

DawsonCosmos
Guest
DawsonCosmos
1 year 9 months ago

What the heck is going on with logger? Where did that next function come from and why is the last function that is being returned the one firing and not the first function?

DawsonCosmos
Guest
DawsonCosmos
1 year 4 months ago

Samy David nailed it. thanks, Samy.

Samy David
Guest
Samy David
1 year 4 months ago

//ES6let logger = (store) => (next) => (action) =>{ }//ES5var logger = function logger(store) { return function (next) { return function (action) {}; };};

Nitin Dev
Guest
Nitin Dev
1 year 9 months ago

You made things so simple..wow!

wpDiscuz