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 ?
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, } }
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.
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.
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
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;
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
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.
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.
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 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.
after doing this i got an error, const chain = middlewares.map((middleware) => middleware(middlewareAPI)); TypeError: middleware is not a function. please fix this
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)
You need to use const thunkMiddleware = require("redux-thunk").thunk;, not const thunkMiddleware = require("redux-thunk").default; with redux-thunk since version 3
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.
@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?
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?
How can some configure the store with the thunk and applyMiddleware to get the same result as you did using configureStore in redux toolkit I tired some ways, none is giving the expected result at all like: * const store = configureStore({reducer}) * const store = configureStore({reducer, middleware: [thunk, applyMidddleware]}) * const store = configureStore({reducer, enhancers: [thunk]}) None gave the same result as yours Kindly assist me out . Thanks for your impact in me. Working fine now..issue with my code with calling dispatch on the store i configure the store this way ...const store = configureStrore({reducer}) my mistake store.dispatch(fetchUsers) instead of write store.dispatch(fetchUsers());
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!
At least someone exists in this world who has the capacity to make redux clearly understand 😍😍😍😍😍
Excellent work! After struggling to get Redux for weeks, it took only 13 of your videos to make it clear to me. Thank you
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
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 ?
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."
This is blowing my mind man. I'm actually getting this. Much love.
Thank you very much, i was trying to use Redux with React Native and was confused. the best redux for free tutorial so far
The best redux tutorial ever!! So simple, clear, concise and to the point! 👌
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,
}
}
This course is phenomenal. Clear as glass!
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 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!
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.
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
Thank you so much man
one of the best tutorial redux that i have learned
Finally got it, blew my mind. Thanks for this, Vishwas.
I thank God I discovered your video, you're a guru------- joseph from Nigeria
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 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
redux was a nightmare for me until this playlist showed up
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
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!
Your explanation of thunks is A1. Thanks for this video.
Great Explanation. God bless you buddy 😇️ Love from INDIA ❤️
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
love the way you gave concept
Why did we use ".default" method while importing redux-thunk ?
Can you please make the same exercise with Redux Saga instead of Redux Thunk? That would be amazing!
if you learn it today this will dont work because you get TypeError: middleware is not a function
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
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!
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.
what does .default do after require() function?
for example require('redux-thunk').default
Literally. LITERALLY, my first ever brain fart when "dispatch" suddenly showed up. And more so when it wasn't even in the guest list.
such an awesome series I loved it man keep up the good work
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!
Really appreciate your work thanks man for this great tutorial keep up the good work Sir! 🙂🙌
Thank you sir . I really like your explanation and the examples to took.
Thank you for making so understandable videos. Please make a video about redux -saga. As soon as possible.
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'
}
Seriously good tutorial. Thank you for the upload
Awesome, now everything looks much understandable.
this channel is so underated
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.
This is great!
Console logs are created by the middleware - correct?
yes redux-logger creates those console logs.
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.
nice tutorial! btw, for some reason, your voice sounds like of an army man :-)
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
redux just blows away my mind🤯
Thank you for great Redux tutorial
error :
error "middleware is not a function"
Solution :
const thunkMiddleware = require('redux-thunk').thunk;
Vishwas, waiting for your next videos on react redux.
Nice tutorial...quick question I have not seen where the thunk middle ware connects or rather has a relationship with the fetchUsers function
Thank you for this amazing tutorial!!😃😃
Thank you for clear explanation
You are a legend sir!
👏👏Thank u so much for this amazing tuto
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,
}
}
Thanku for all your videos
that's awesome bro. keep it up for sure
3:00 redux-thunk helps to return a function instead of an action object
const store = createStore(reducer, applyMiddleware(thunkMiddleware, logger)) -------> we can give mutiple args to middleware. Just tried
thunk allows action creator to return function that does side effects i.e. call to API
nice, clear explaination sir
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 🤦♂️
Apt!
Thank you, Vishwas
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
How the dispatch (fetchuser()) call automatically internal function
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)
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
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.
Splendid explanation!!!!
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.
How can i solve the error "middleware is not a function"
Solution is : const thunkMiddleWare = require("redux-thunk").thunk; instead of default
Eagerly waiting for more!
Is there a reason why you usually dont use ES6 method of import?
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
Can we use fetch api instead of axios??
Ofc
Thanks this video realy helped
@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
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
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?
How can some configure the store with the thunk and applyMiddleware to get the same result as you did using configureStore in redux toolkit
I tired some ways, none is giving the expected result at all like:
* const store = configureStore({reducer})
* const store = configureStore({reducer, middleware: [thunk, applyMidddleware]})
* const store = configureStore({reducer, enhancers: [thunk]})
None gave the same result as yours
Kindly assist me out . Thanks for your impact in me.
Working fine now..issue with my code with calling dispatch on the store
i configure the store this way ...const store = configureStrore({reducer})
my mistake store.dispatch(fetchUsers) instead of write store.dispatch(fetchUsers());
Hi, Can u make videos on redux-saga as well? You explain good
And how is it that am not using store.dispatch but dispatch itself and it works??
Me encantó tu vídeo realmente explicas excelente
Can async code work inside of a normal reducer?
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
In my code I getting error
Cannot read properties of undefined (reading 'applymiddle'l
can't we use any other npm module to make GET request to API endpoint?
If I am using unsubscribe() method then I am not able to get users in the state object. Is it because of thunkMiddleware problem?
I think its because u did unsubscribe )