One of the best redux tutorial till now. Had been searching for the one with a very good and detail explanation and found yours. Thanks man. Really appreciate a lot. Keep uploading more.
Same for me, I can't get it what that dispatch as an argument is supposed to be :) But I tried that without it and it didn't work, so it seems to be necessary there.
dispatch() requires a plain action object. Our action creators normally return just that. A plain object. Redux-thunk allows us to use a function in our dispatch. The middleware can discern between an object and a function. If it is a function returned from our action creator, that return function is invoked and it is passed the dispatch function from the store as an argument. This way, we have dispatch available to us right in our object creator. We’re still dispatching plain objects to our reducers at the end of it all, we’re just moving the dispatch to the action creator function, so we can introduce those side effects like additional logic, or asynchronous calls. So I guess in a way we are ‘lifting’ the store.dispatch() method into the action creator function and calling it there. The reducers know no different. They’re still getting plain objects.
Superb. Redux explained in most simple & intuitive way. I have following queries regarding current video? - Can we completely avoid redux-thunk, do the async stuff out of the redux system & just update the redux state whenever we need ? - Do we really need that action creator wrapper "fetchUsers" that returns the actual function. Can't we pass that function ref (no actual call) directly to our dispatch call ?
I got an error that said sth like "middleware is not a function". Fixed by replaceing require("redux-thunk").default with require("redux-thunk").thunk.
Everyone who gets Error message: "UnhandledPromiseRejectionWarning: ReferenceError: error is not defined..." or like this: Its because we have to put are arguments into the functions: const usersSuccess = (users) => { return { type: USERS_SUCCESS, payload: users, } } const usersFailure = (error) => { return { type: USERS_FAILURE, payload: error, } }
const thunkMiddleWare = require("redux-thunk").default; is getting error and the Error is : const chain = middlewares.map((middleware) => middleware(middlewareAPI)); Solution is : const thunkMiddleWare = require("redux-thunk").thunk;
This is most difficult part for understanding redux as a whole in my point of view. In my opinion, async action creator is an action creator that controls different dispatches asynchronously, in this case, by axios and thunk( create space for non-pure function(otherwise the dispatches cannot be put insides) inside an action creator) . Hope this may help a bit.
Thank you for this great tutorial video! It is helpful for learning to use redux and async call, I like very much how you put the store, actions and reducers in one file. It makes the code very transparent and easy to understand. Great job, and thank you!!!
make an API call and Dispatch the appropriate Action 1:11 npm install axios redux-thunk 1:33 redux.applyMiddleware 1:44 pass second param to createStore 2:02 import redux-thunk 2:12 pass param redux-thunk to applyMiddleware 2:22 import axios 2:33 async actionCreator
I was stuck in between then I just paused the video saw my code again and understood it completely. Thanks to you the way you teach It all makes sense to me. and sometimes I try to write code before you as I know I will understand that with your help if stuck
In JavaScript, automatic semicolon insertion (ASI) allows one to omit a semicolon at the end of a line. But use it wisely as there are certain scenarios where omitting semicolons can be a cause of error in your code
after doing this i got an error, const chain = middlewares.map((middleware) => middleware(middlewareAPI)); TypeError: middleware is not a function. please fix this
Vishwas you did all the sessions awesome and next level , if you have time kindly make the series on redux-saga also , i hope it also appear this series in your video play list in upcoming days thank you brother.
Look more into Redux before trying to learn about Thunks, the dispatch call here is just to actually call the action creator (fetchUsers) on the store, not calling store.dispatch would be like declaring a function without ever using it.
You need to use const thunkMiddleware = require("redux-thunk").thunk;, not const thunkMiddleware = require("redux-thunk").default; with redux-thunk since version 3
Thank you Vishwas 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.
Hi Viswas, Im getting this error, im not able resolve, any idea.? { loading: true, users: [], error: '' } { loading: false, users: [], error: 'self signed certificate in certificate chain' }
When i' am running the application it throws this error in the console UnhandledPromiseRejectionWarning: ReferenceError: error is not defined would any one sort out the problem i'am facing?
Can someone please explain how the return function inside the fetchUsers( ) get the dispatch? I mean, the fetchUsers( ) does not have any parameter but how can the function inside it receive dispatch?
See the last line - dispatch(fetchUsers()) , when this line gets executed then redux middleware checks what it returns , if its object then execute as always , but if it returns a function then pass dispatch as an argument to that function .What happens is Rudux stores that function in a variable , then passes dispatch to it , u are confused because u think fetchUsers() is somehow passing dispatch , but in reality the returned function by fetchUsers has already been saved inside redux , which has dispatch to pass on to it . Also remember , returning a function with an argument will not give an error , it is just being returned , its not being called . Its been only called inside redux which has dispatch to pass on to it (and how redux got that retuned function ?? because of the last line i mentioned above)
Because it is something like design pattern. Reducers are responsible only for holding data and basic operations like, filter, omit... Call action could be in reducer, but in more complex code it would be a mess. And second problem would be middleware. Middleware is something between action creator and reducer so if you wanted to make async api call directly in reducer it would bypass any redux middleware, so you had to code something own that could process async calls.
It works on decrement(when buying cake the number of cake decrease) but when trying to increment it malfunctions. Suppose numOfCakes-10 and when we buy it gives us 9 but when incrementing the number instead of giving 11 it gives us 101, 1011, 10111, 101111... Why? is it an intention bug?
@Codevolution I have written the same code as it is but after running nothing in the output . const fetchUsers = () => { // reaching here return function(dispatch) { // not reaching here } } It is not going inside the return function(dispatch) can you please help me here what wrong I am doing?
One of the best redux tutorial till now. Had been searching for the one with a very good and detail explanation and found yours. Thanks man. Really appreciate a lot. Keep uploading more.
The moment you put dispatch as an argument in return function inside action creator my brain had a short circuit...
sorry about that, I had the reaction with time it will finally stick
So did i
Same for me, I can't get it what that dispatch as an argument is supposed to be :) But I tried that without it and it didn't work, so it seems to be necessary there.
same here
dispatch() requires a plain action object. Our action creators normally return just that. A plain object.
Redux-thunk allows us to use a function in our dispatch. The middleware can discern between an object and a function. If it is a function returned from our action creator, that return function is invoked and it is passed the dispatch function from the store as an argument. This way, we have dispatch available to us right in our object creator. We’re still dispatching plain objects to our reducers at the end of it all, we’re just moving the dispatch to the action creator function, so we can introduce those side effects like additional logic, or asynchronous calls.
So I guess in a way we are ‘lifting’ the store.dispatch() method into the action creator function and calling it there. The reducers know no different. They’re still getting plain objects.
Now use
const thunkMiddleWare = require("redux-thunk").thunk;
instead of
const thunkMiddleWare = require("redux-thunk").default;
Thank You! Thank You! Thank You!
Thank you. you saved me.
@@nidhisharma-s7f Welcome
Thanks mate, You saved me, I could found any solution over the internet
life saver!
This whole channel is absolute gold.
Thank you so much for making these videos. You're saving lives.
i subscribed right away... i'm sooo confident of redux like mad...
That's what I was looking for and I have completed all the tutorials for ReactJs and now this series of tutorials and I loved it soo much.
Bro..do you have good tutorials for React Routing ?
@@sidvyas2302 did you find anything good on React Routing yet? Thanks in advance
Excellent work! After struggling to get Redux for weeks, it took only 13 of your videos to make it clear to me. Thank you
At least someone exists in this world who has the capacity to make redux clearly understand 😍😍😍😍😍
Superb. Redux explained in most simple & intuitive way.
I have following queries regarding current video?
- Can we completely avoid redux-thunk, do the async stuff out of the redux system & just update the redux state whenever we need ?
- Do we really need that action creator wrapper "fetchUsers" that returns the actual function. Can't we pass that function ref (no actual call) directly to our dispatch call ?
This is blowing my mind man. I'm actually getting this. Much love.
Thanks a lot for such a clear explanation on Redux, never understood the Thunk like this before, 7:35 summarizes the key concept of middleware.
"Thunk returns a function instead of an action so that it can perform async tasks."
Thank you a lot for your tutorials, for they are the best react/redux ones I've watched!
Love your videos! They're always clear and concise. You've helped me out so much!
The best redux tutorial ever!! So simple, clear, concise and to the point! 👌
Thank you very much, i was trying to use Redux with React Native and was confused. the best redux for free tutorial so far
I got an error that said sth like "middleware is not a function". Fixed by replaceing require("redux-thunk").default with require("redux-thunk").thunk.
Thanks man.🤝
Thanks....it was very helpful...
Thanks man :)
thanks a lot
This course is phenomenal. Clear as glass!
Wow, amazing series! I am now confident in Redux, thank you
Everyone who gets Error message: "UnhandledPromiseRejectionWarning: ReferenceError: error is not defined..." or like this:
Its because we have to put are arguments into the functions:
const usersSuccess = (users) => {
return {
type: USERS_SUCCESS,
payload: users,
}
}
const usersFailure = (error) => {
return {
type: USERS_FAILURE,
payload: error,
}
}
const thunkMiddleWare = require("redux-thunk").default; is getting error
and the Error is : const chain = middlewares.map((middleware) => middleware(middlewareAPI));
Solution is : const thunkMiddleWare = require("redux-thunk").thunk;
thank you!
you are the best teacher i have ever come across in any technical stack
This is most difficult part for understanding redux as a whole in my point of view.
In my opinion, async action creator is an action creator that controls different dispatches asynchronously, in this case, by axios and thunk( create space for non-pure function(otherwise the dispatches cannot be put insides) inside an action creator) .
Hope this may help a bit.
This 8 minute long video took me 2 full days to grasp!!!
lol? but this is the most easy y comprensible tutorial i ever seen after now.....
Thank you for this great tutorial video! It is helpful for learning to use redux and async call, I like very much how you put the store, actions and reducers in one file. It makes the code very transparent and easy to understand. Great job, and thank you!!!
one of the best tutorial redux that i have learned
make an API call and Dispatch the appropriate Action 1:11 npm install axios redux-thunk 1:33 redux.applyMiddleware 1:44 pass second param to createStore 2:02 import redux-thunk 2:12 pass param redux-thunk to applyMiddleware 2:22 import axios 2:33 async actionCreator
Finally got it, blew my mind. Thanks for this, Vishwas.
I was stuck in between then I just paused the video saw my code again and understood it completely. Thanks to you the way you teach It all makes sense to me. and sometimes I try to write code before you as I know I will understand that with your help if stuck
if you learn it today this will dont work because you get TypeError: middleware is not a function
make some paid courses at a student-friendly price. I am pretty sure you will rock this market. you are spending your time, you deserve the value.
Thanks a lot for you clear and concise explanation. Am so glad learning from you
I thank God I discovered your video, you're a guru------- joseph from Nigeria
redux was a nightmare for me until this playlist showed up
Why did we use ".default" method while importing redux-thunk ?
love the way you gave concept
this channel is so underated
Great Explanation. God bless you buddy 😇️ Love from INDIA ❤️
Many thanks Vishwas. Always been a fan of your training videos. One doubt though, why don't you put semicolons in any of the statements!!!
In JavaScript, automatic semicolon insertion (ASI) allows one to omit a semicolon at the end of a line. But use it wisely as there are certain scenarios where omitting semicolons can be a cause of error in your code
such an awesome series I loved it man keep up the good work
after doing this i got an error, const chain = middlewares.map((middleware) => middleware(middlewareAPI));
TypeError: middleware is not a function. please fix this
Solution is : const thunkMiddleWare = require("redux-thunk").thunk; instead of default
Thanks a lot! It works now nicely @@OtepArc
error :
error "middleware is not a function"
Solution :
const thunkMiddleware = require('redux-thunk').thunk;
what does .default do after require() function?
for example require('redux-thunk').default
Vishwas you did all the sessions awesome and next level , if you have time kindly make the series on redux-saga also , i hope it also appear this series in your video play list in upcoming days thank you brother.
Can you please make the same exercise with Redux Saga instead of Redux Thunk? That would be amazing!
Your explanation of thunks is A1. Thanks for this video.
Really appreciate your work thanks man for this great tutorial keep up the good work Sir! 🙂🙌
nice tutorial! btw, for some reason, your voice sounds like of an army man :-)
I felt that "dispatch" came all of a sudden. At the point of watching this I'm not understanding it. Could anybody shed some light please?
Look more into Redux before trying to learn about Thunks, the dispatch call here is just to actually call the action creator (fetchUsers) on the store, not calling store.dispatch would be like declaring a function without ever using it.
Very useful video! You have a nice explanation over the things!
Nice tutorial...quick question I have not seen where the thunk middle ware connects or rather has a relationship with the fetchUsers function
You are a legend sir!
Seriously good tutorial. Thank you for the upload
Am i the only one getting typeerror: middleware is not a function? I've been trying to get rid of this for the past 4 hours, but i couldn't
You need to use const thunkMiddleware = require("redux-thunk").thunk;, not const thunkMiddleware = require("redux-thunk").default; with redux-thunk since version 3
This is great!
Console logs are created by the middleware - correct?
yes redux-logger creates those console logs.
It would be really helpful if you could make tutorial for Redux Saga. Your tutorial videos are extremely helpful for developers like us. Thanks a ton!
TypeError: middleware is not a function
i am getting this error from several days cant find solution
Solution is : const thunkMiddleWare = require("redux-thunk").thunk; instead of default
Hi, I got nothing when I tried to run the node asyncActions.js, there are no error either in the console.
I have the same, I didn't invoke the function with a ()
@@seannaify thanks for the help mate.
Since version 3
const thunkMiddleware = require('redux-thunk').thunk instead of const thunkMiddleware = require('redux-thunk').default
Man, thank you. I spent way too long trying to debug it when I should have just came to the comments 🤦♂️
👏👏Thank u so much for this amazing tuto
Thank you Vishwas 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.
that's awesome bro. keep it up for sure
Thank you for great Redux tutorial
Thank you sir . I really like your explanation and the examples to took.
Thank you for this amazing tutorial!!😃😃
Literally. LITERALLY, my first ever brain fart when "dispatch" suddenly showed up. And more so when it wasn't even in the guest list.
Thanku for all your videos
Awesome, now everything looks much understandable.
Hi Viswas,
Im getting this error, im not able resolve, any idea.?
{ loading: true, users: [], error: '' }
{
loading: false,
users: [],
error: 'self signed certificate in certificate chain'
}
Thank you for making so understandable videos. Please make a video about redux -saga. As soon as possible.
redux just blows away my mind🤯
How can i solve the error "middleware is not a function"
Solution is : const thunkMiddleWare = require("redux-thunk").thunk; instead of default
Splendid explanation!!!!
3:00 redux-thunk helps to return a function instead of an action object
Thank you for clear explanation
const store = createStore(reducer, applyMiddleware(thunkMiddleware, logger)) -------> we can give mutiple args to middleware. Just tried
Eagerly waiting for more!
nice, clear explaination sir
Apt!
Thank you, Vishwas
Thanks this video realy helped
thunk allows action creator to return function that does side effects i.e. call to API
still i'm getting this error const chain = middlewares.map((middleware) => middleware(middlewareAPI));
^
TypeError: middleware is not a function
Write
const thunkMiddleware = require ('redux-thunk'). thunk
Instead of
const thunkMiddleware = require ('redux-thunk'). default
How the dispatch (fetchuser()) call automatically internal function
When i' am running the application it throws this error in the console UnhandledPromiseRejectionWarning: ReferenceError: error is not defined
would any one sort out the problem i'am facing?
have you sorted it out?
i am also getting the same error
const usersSuccess = (users) => {
return {
type: USERS_SUCCESS,
payload: users,
}
}
const usersFailure = (error) => {
return {
type: USERS_FAILURE,
payload: error,
}
}
great job!! thank you!!
awasome !!!! thank you
Can someone please explain how the return function inside the fetchUsers( ) get the dispatch? I mean, the fetchUsers( ) does not have any parameter but how can the function inside it receive dispatch?
yeah, i need the answerr also
See the last line - dispatch(fetchUsers()) , when this line gets executed then redux middleware checks what it returns , if its object then execute as always , but if it returns a function then pass dispatch as an argument to that function .What happens is Rudux stores that function in a variable , then passes dispatch to it , u are confused because u think fetchUsers() is somehow passing dispatch , but in reality the returned function by fetchUsers has already been saved inside redux , which has dispatch to pass on to it .
Also remember , returning a function with an argument will not give an error , it is just being returned , its not being called . Its been only called inside redux which has dispatch to pass on to it (and how redux got that retuned function ?? because of the last line i mentioned above)
I finally understand 🙏🏻
Do we really need redux-thunk here? Can't we directly invoke the function defined(returned) inside fetchUsers() and it will do the job for us?
that's the whole point without using thunk you won't be able to. just go thru redux-thunk docs once you will understand.
thunk you so much!
Vishwas, waiting for your next videos on react redux.
im getting an error "TypeError: middleware is not a function
"
same,how did you solve it?
const thunkMiddleware = require('redux-thunk').default
remove.default
const store = createStore(reducer, applyMiddleware(thunkMiddleware.thunk))
add .thunk inside the createStore
@@eshwerhari4989 Thank you.
So Amazing!
Thank you!
bhai yar tu english bohot acchi bolta hain our muze pata hain ki teri language hindi hain to agese videos hindi me banaya kar please bhai its request
6:44 Test 7:33 Summary
Why do we make a get call in actions and not in reducers??? why to do only in actions not somewhere else. Is there any valid reason for that??
Because it is something like design pattern. Reducers are responsible only for holding data and basic operations like, filter, omit... Call action could be in reducer, but in more complex code it would be a mess. And second problem would be middleware. Middleware is something between action creator and reducer so if you wanted to make async api call directly in reducer it would bypass any redux middleware, so you had to code something own that could process async calls.
It works on decrement(when buying cake the number of cake decrease) but when trying to increment it malfunctions. Suppose numOfCakes-10 and when we buy it gives us 9 but when incrementing the number instead of giving 11 it gives us 101, 1011, 10111, 101111... Why? is it an intention bug?
can we use the same logic in reducer to make axios request and get data , instead of thunk middleware
Never use reducers for api calls
@@ojko12345 I know we shouldn't use, but what's the reason behind it rather than having organized code
@Codevolution I have written the same code as it is but after running nothing in the output .
const fetchUsers = () => {
// reaching here
return function(dispatch) {
// not reaching here
}
}
It is not going inside the return function(dispatch)
can you please help me here what wrong I am doing?
its a common problem and no one has solution... i have searched everywhere lol
You are the best ...
Hi, Can u make videos on redux-saga as well? You explain good