Redux Middleware Tutorial - Redux Tutorial #5

Показать описание

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.

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

-~-~~-~~~-~~-~-
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
-~-~~-~~~-~~-~-

Рекомендации по теме

Комментарии

You seriously have a talent for explaining concepts clearly. Best Redux material I've seen so far.

bstrom

Now in 2020 this course is still the best one along the many videos on Redux I've looked through.
Thanks so much !!!

Sergey-mrbe

Wow! The explanation is so complete. 4:49 it's "AHHHH!!" then "Error: nailing it. Middleware first. Thanks.

saptadeepdutta

This series is my favourite of all programming series, you and Derek Banas make the coolest and most useful tutorials!

cyancoyote

console.log("AHHH!! Another awesome video!").

Davidlavieri

Thx dude your tuts are awsome, can't wait to see the next one.

geoffreypappaert

hello from Colombia ! i was starving for this video, thanks a lot and keep it up with the good work !!

alejandrobaezarcila

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?

matthewchung

4:20 no need to copy and paste, press cmd+shift+d to quickly duplicate a line ;)

JanoschMuller

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

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 will lead to compile error. This should has something to do with the javascript error handling mechamism. Can you plese explain why?

toml

I think the logger function requires some extra explanation. It's hard to see what's going on here when "logger", "store", and "middleware" look interdependent. Store has middleware as a param, middleware has logger as a param, and logger has store as a param???

jessrichardsoncomedy

Thank you much Will. My life saver. I love middleware ^_^

qiuhongfu

when the next one is coming? It would be better if you explain what is the purpose of not mutating the existing states and creating new ones.It seems creating new states will take more memory while working in huge projects

srsundar

what advice can you give to someone who is having a lot of trouble with this. I created a node express app with users model and all the basic crud actions and routes to them. A basic react front end with a few components to show.

But im having the hardest time over a week trying to figure out how to connect that data to redux and get it to work??

my logic was ok ill just require my User model to this and refer to my model as User and i can call my methods etc. But i cannot grasp this how this works? any advice? i been watching videos, reading examples, trying out some stuff but failing miserably

whiskey

In the git files you posted, you have 'return next(action);' instead of 'next(action);' Is there any difference between the two?

marcalexander

hey there is no link between the REDUCER and DISPATCHER then how reducers taking propertys of what we dispatching, is automatically takes values of

ramusesandasari

so the order of the mw would be the order of parameters

JazevoAudiosurf

Someone knows the meaning of "1" at createStore ?

jose.salgado

Cant stop laughing with that error logger.... hahahahhahahahahah

JerickDuguran

Redux Middleware Tutorial - Redux Tutorial #5

Redux Middleware Tutorial - Redux Tutorial #5

React Redux Tutorials - 13 - Redux Thunk Middleware

React Redux Tutorials - 11 - Middleware

Redux in 100 Seconds

ReactJS / Redux Tutorial - #6 Redux Middleware

#5 Redux Logger | MiddleWare | Redux Tutorial for Beginners

Redux Middleware Example Tutorial | React Redux Series Part 6

Master Redux Middleware in Minutes #Redux

What is Redux? Get A Senior Understanding of How Redux Works

React Redux Tutorial - Middleware - 15

Redux Middleware Basics | React Native | WTF is Redux

REDUX TUTORIAL #9 MIDDLEWARE #redux #reduxtoolkit #reduxtutorial

Redux Middleware/Async/Thunk: The complete Guide

React Redux Thunk Middleware in Redux Toolkit for Async Actions with Axios

ReactCasts #6 - Redux Middleware

Master Redux Middleware in Your Apps #Redux

#4 Redux Thunk | MiddleWare | Asynchronous Actions | Redux Tutorial for Beginners

Redux Insights: the Redux Toolkit 'action listener' middleware

Create your own Redux Thunk | Create your own redux middleware

React Redux Tutorial - Middleware

Master Redux Middleware for Async Actions #Redux

Redux | #63 - What is Middleware [By Mosh Hamedani]

Middleware - Redux Part 9

9. Redux Toolkit Middleware - redux-logger