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

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

Notify of
avatar

Hami Dki
Guest
Hami Dki
1 year 1 month ago

Could you please explain the thunk chaining thing?

Cypher
Guest
Cypher
11 months 6 days 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 1 month 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 1 month 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 3 months ago

share to be share, thanks you

Soi Xam
Guest
Soi Xam
1 year 3 months ago

share to be share, thanks you

DawsonCosmos
Guest
DawsonCosmos
1 year 3 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
10 months 24 days ago

Samy David nailed it. thanks, Samy.

Samy David
Guest
Samy David
10 months 26 days ago

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

DawsonCosmos
Guest
DawsonCosmos
1 year 3 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
10 months 24 days ago

Samy David nailed it. thanks, Samy.

Samy David
Guest
Samy David
10 months 26 days ago

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

Nitin Dev
Guest
Nitin Dev
1 year 3 months ago

You made things so simple..wow!

Nitin Dev
Guest
Nitin Dev
1 year 3 months ago

You made things so simple..wow!

Taras Zaluzhnuy
Guest
Taras Zaluzhnuy
1 year 4 months ago

that "AHHHHH!!!" made this video.

Irfan Soetedja
Guest
Irfan Soetedja
1 day 16 hours ago

LOL.. The best Part!

Bemmu Sepponen
Guest
Bemmu Sepponen
11 months 18 days ago

It's those little quirks that act as a reminder to click "like" 🙂

wpDiscuz