Redux-thunk Middleware | React Redux Series Part 7

[@thomasmatlock942]

I’m guessing the 2 people who hit dislike don’t know what React or redux is. That’s about as good of an explanation as it gets

[@JaphethAwah]

Man there are always haters out there, I started looking at redux from code, and most of it made no sense to me till I found his explanations, couldn't be clearer, followed the entire redux series. I think he is quite concise and explains so well, he even explained the word thunk hahaha.. With short and concise videos.

[@arsalanahmad1832]

I learnt redux from this series an year earlier, now I was stuck and was trying to deal with redux ascynchronously, I watched this again and I realized how much this series taught me, the video is still the same but I am with much more knowledge and skill, thanks to this video series and thank you TechSith !

[@Techsithtube]

I am glad that you keep coming back to watch these videos, I feel great as a teacher.

[@shjohnson2941]

Great... This helped it to FINALLY begin to make sense!

[@ruchirai5775]

Nothing is confusing, Its plain simple and amazing !

[@kranthikumar5215]

You are a real guru of technology sir god bless you for providing such videos sir live long🙏

[@Techsithtube]

Thanks Kranthi!

[@premrajsahu5277]

i really learn a lot from your tutorials. These are the easiest tutorial available. I have completed one of the top udemy course on react/redux. But this is way better than that. Thanks for all the effort.

[@klausheino6986]

You really made the complex subject seem so simple. I am learning to use redux and thunk and have had my nerves stretched by unclear tutorials, but this one was an exception. Liked and subscribed. Keep going :)

[@Techsithtube]

THanks for watching Klaus.

[@tenzinwoeser6842]

Love this and the earlier custom middleWare which you created. Thanks

[@daviddonadze221]

you are my favorite teacher that i never had. Thx for those cool videos

[@Techsithtube]

Thanks David, Its good know that I am able to channel the knowledge. :)

[@ravikamesh4763]

Actions must be plain objects. Use custom middleware for async actions. This is the error you get if you try to use setTimeout or any async action. Hope it helps.

[@kranthikumar5215]

clean and clear explanation i have ever seen 👌

[@Techsithtube]

Glad it helped

[@noamkleiner8749]

Awesome tutorial, I'm following the series and learning so quick! Thanks a lot!

[@sivamurugans3228]

Awesome tutorial..! Good explanation

[@Techsithtube]

Glad it helped! Thanks for watching!

[@mallikarjunkittad3123]

Awesome tutorial, now i got basic redux , THAX lots sir

[@edgarnyc]

Thanks for the video! Easy to understand, follow, and fully demonstrates how/why to use thunk. Thanks so much!

[@kajurajude1753]

I love your tutorials

[@Techsithtube]

Thanks for watching!

[@nickjunes]

It's funny how we have to create all this extra boilerplate just to bury the asynchronous functions more and more without any actual gain.

[@subhashgn1775]

Thank you man for your great effort to give the quality content. I Have question, "Reducers must not do any asynchronous logic, calculate random values, or cause other "side effects" but how these middleware achieve the asynchronous logic integration.

[@nomangulkhan]

. *You're Great!*

[@mridulmishra8166]

indians are...

[@milanpavlovic8141]

I love this explanation

[@sharmamanish3]

Brilliant and beautifully explained.

[@Techsithtube]

Thanks for watching!

[@ATXpert]

Really helping me man, struggling to get a job so I'm making a whatsapp project

[@trader9559]

Awesome :)

[@huanzhang4110]

You should probably switch around the names of ageUp and ageUpAsync. Its a little confusing as in the video the asynchronous function is called ageUp, and the synchronous function is called ageUpAsync xD

[@sarojdash7210]

Can we dispatch from a setTimeout in mapDispatchToProps() without thunk middleware ? will it have dispatch as closure property even if we don't use thunk? I just want to understand if we can make async call then dispatch without thunk or not. and if so then what is the purpose of thunk

[@xiaokourou]

Awesome. Very clear

[@websitesandsoftwaresolutio2812]

Exceptionally well explained ! Cheers Man

[@ruchirai5775]

In love with your react series.Amazing explanation :)

[@leannec6821]

Awesome Tutorial! Thank you!

[@nivaech]

Awesome series, very helpful. Thank you, jedi

[@syedkashanadil7240]

Thats really impressive.

[@umardarazkhan4817]

you told in this vedio that u are going to make another one in which u would show the get and post on server with redux implemented .. where is it sith?? can't find it ? by the way u are running an awsome tutorial series on ur own

[@draganmilunovic2525]

You are the GREAT teacher. Thank you very much :))))

[@ГеоргийРукомин]

Thank you.

[@emanuel5207]

how does 'dispatch' parameter come in on ageUp function? export const ageUp = val => { return dispatch => { setTimeout( () => dispatch(ageUpAsync(val)), 2000 ); } };

[@sivanesh-s]

That will be Provided by the redux-thunk middleware. Which gets this function returned in ageUp() and calls it with dispatcher argument

[@djslimcodes2337]

@@sivanesh-s Is it necessary to call it dispatch?

[@sivanesh-s]

@@djslimcodes2337 Not really it is just the argument. You can name it anything

[@zation99]

​@@sivanesh-s Exactly, for example the video named it 'dispach' which I believe is a typo. But that well (accidentally) illustrates the idea that it is just a parameter name XD

[@nitishkesarwani4699]

Hello, While going through this tutorial, I had a doubt. That is... we are doing all of this just to make things async., we captured the action, now we said that (it's from your example) if we will first save the value to the server and then will update the state, but in this case: suppose the current state's value is 5 (which is showing on UI) and user clicks the ageUP button, then user would like to send the updated value to the server (which will be '6' in this example), but the updation will only take place when the action would reach reducer. Before updating the state, we have called the server via middleware...to save the value (which will be 5 not 6) How will I be able to send the updated value to server ?

[@Techsithtube]

in that case you dont update value in the reducer. you simply set the new value in the reducer. this way the backend and frontend is sync.

[@jiahaoyu855]

You are the best! If you have made some udemy class I would buy it!

[@cezar007dead8]

Grate job! Awesome tutorial!

[@miroslavvalkovic9144]

Can you point me to that "Server interaction video" please? thank you

[@aysommer]

Thanks for you good video. It helped.

[@infotainment7123]

when you imported actionCreator from actions... i am getting error on this.. apparently there is no actionCreator in actions.js

[@jojiharada]

getting the same. will let you know if I figure it out.

[@jojiharada]

change the import statement to: import { ageUp, ageDown } from './store/actions/actions';

[@jojiharada]

Also just noticed that he adds: import * as actionCreator from "./store/actions/actions'; which solves the problem.

[@AdityaNaik12]

In setTimeout why we need to add dispach, can we just call ageUpAsnc, dispatch is already there in mapDispachToProps. Tried to figure it out but still not getting it.

[@Techsithtube]

basically for async actions, we need to dispatch an event from mapDispachToProps then catch it with the redux thunk, and finish the async evert ( which is just settimeout in this case) and then dispatch it again to it with reach the reducer.

[@aishwaryshah3823]

Kem cho sir ? tame react easy kari di du :) Thank You. Sir tame tips and tricks regarding video banao ne on react. please

[@pkmkb_0]

muze south ind laga

[@johncreativeproducts5688]

NICE TUTORIAL!

[@atul803]

why state. loading is not mapped with reducer state{}. Please confirm, without mapping in reducer we are changing the state true. Is this the correct way?

[@kianitify]

that was awesome

[@salahmadih8478]

You are the best, thank you

[@ivanbadyulya5562]

What extension do you use to highlight a code block? :)

[@Techsithtube]

manual :)

[@venkatpenubothu4805]

Great!

[@leartmorina5037]

Hey I'm struggling with redux my question is if i say switch(action.type) { case goap: return newstate default: return state } my question is when i dispatch the action goUp(1) i got count: undefined why this happen to me

[@shijunli]

Good explanation

[@thanvezahmed3866]

Any plans of you doing videos on Epics redux observable

[@Techsithtube]

Not at the moment but I will put it in the queue of videos to make :)

[@NandhuKishorReddy]

Please help me..While refreshing page my redux state is clearing why....

[@thanvezahmed3866]

Hi at 5.18 Ur import action creater from store/action/action Wer is this action creation declared in that file?

[@Techsithtube]

If its a default export you can name it whatever when you import it. Basically actionCreater becomes action

[@thanvezahmed3866]

Got it. Thanks buddy :-)

[@djslimcodes2337]

at 14:46 can we place dispatch(loading()) above return? i guess we cant but why?

[@HoangVu-lr8mh]

As you could see, dispatch is a parameter which is a function, so if you place dispatch(loading()) above the return statement, dispatch is undifined.

[@agalligani]

Where is the next video?

[@nanasarathi]

Awesome

[@gottedev79]

you are awesome

[@gottedev79]

got a subscriber

[@Techsithtube]

Thanks Dav for subscribing. :)

[@iliketocode6986]

Isn't a thunk just a promise then?

[@deathmachine808]

Yeah but you're not actually awaiting it in the calling code... so you don't know if / when if finishes / succeeds or fails...

[@sawyer303]

Hurts my ears when I hear him say basically ^^

[@sawyer303]

Beisicaliii, I'm fkn dieing right here

[@sawyer303]

Again :)))

[@sawyer303]

@techsith lmgtfy.com/?q=basically+pronunciation Other than this, thank you! Lovely content ^^

[@indowestlife]

*dispatch

[@bleonmorina2986]

can i translate your video in albanian language?

[@becky2casandra810]

i hate small screen :(

[@Techsithtube]

Sorry, its very hard to display this in a zoom . Were you watching on mobile device?

[@einfacherkerl3279]

tutorial is good but honestly, redux is outdated like a dinosaur. there are better options now like reactquery and whoever is learning redux now must have been living under a rock

[@rommyarb]

Please fix your spelling sir

[@Techsithtube]

Unfortunately, I can't fix it after the release of the video. But, I can be careful next time. I am not a great speller but I make up the short comings with my coding skill. :)

[@hovhannes4628]

What mistake is it about, can you indicate the minute, Please?

[@dhairyadudhatra278]

volume is too LOW

[@handsome_man69]

seen

[@Techsithtube]

Thanks for a comment felix. :)

[@handsome_man69]

@@Techsithtube youtube is really bad at tracking which videos I have seen, so I put a "seen" in all the videos comments i see, so i know i've seen it

[@Techsithtube]

:) its a good idea. You can also create a playlist of seen videos .

[@nehajain7720]

Brilliant and beautifully explained.