A good teacher or say mentor is the one who teaches or explains the complex concepts in such a way which makes it easy to grasp and remember. You are on of those mentors ! Thanks and lots of Blessings
This kind of video are really useful, all we know official Docs still already there, accesible and updated...obviously that's the source of truth. Even though the way your drop explanations, step by step while dropping cons and pro about every single detail, it just really rocks. Congrats Vishwas, because your teaching skills are just amazing.
Dude, the day you will deal with Solidity (Ethereum smart contract langage)like you usually do with react, I think your account is gonna hit 1 million subscriber...You are just the best in coding in my opinion...Web3 world is going to be huge...thank you for all thing you do...
For anyone wondering if you should use it for "isLoading (boolean)" as it is in this video - don't. Await/then "freezes" your app till it gets response from axios or fetch function, so the isLoading = true is not immediatelly refreshed in the component which uses it, and therefore you end up with loading message popping up on the screen for literally a microsecond. Use case shown in the video is strongly misleading and should be considered as a bug
I am working on a project which requires me to use a loading spinner. can you suggest an alternative for the approach shared by vishwas for the fact that you think this approach might be buggy?
I love the way you are teaching, is there a chance you can cover thunkapi and thunkarg Quick question, say, if createAsyncThunk and createSlice functions are in 2 different files, if there are n number of features, how we can relate or find which createAsyncThunk callback promise referring to which createSlice which has corresponding extraReducers, sorry if its sounds silly question
because actions are automagically generated by createSlice when you populated its reducer property with functions. these reducer functions of createSlice cant update the state in async mode. so the async function is handled by createAsyncThunk, which also automagically generations actions. These actions generated by createAsyncThunk are external to createSlice. so the only way for createSlice to respond to them is through extrareducers
I had this issue because of curly braces in the fetchUsers function : ... .then(res) => res.data.map(user )=> {user.id}) I removed it and it works : res.data.map(user=> user.id)) . Hope it's clear and helpfull
I am so lost now. I used to create slices in Index,js (store) and export actions. Then just dispatch those actions. This is something different, still trying to see what the heck is going on, is my learning outdated?
Hey, For one async api request, we have added three addCase function in builder. If I need to delete two more apis, like post and delete users then there will be six more cases in extra reducers functions?
Encoding issue with Brotli compression axios 1.2.1 either downgrade to an older version or add a custom header in the get function with headers: { 'Accept-Encoding': 'gzip', }
Old tutorial used pure redux & not redux-toolkit to make async action call. redux-toolkit is just an abstraction on top of normal redux explained before.
The answer I think It can be when the request is made we changed the state so the subscribe is called and when it is rejected then it called again and logged the state again. But i'm not fully sure
Hi vishwas why don't you show us async thunk fetching data by using useSelector and useDispatch hooks ! In ur react redux also u used this scenario only ! I hope u make a video on async fetching data by using hooks
Thanks very much for this great video. I don't know if anyone has encounter this problem store.dispatch(fetchUsers()) ^ TypeError: fetchUsers is not a function. I downgraded to a v1.6.1 as suggested in a github pull request issue. But it doesn't seem to solve the problem and I'm using the LS version. Let me know if you have a solution.
In the axios when I use .then((res) => { res.data.map((user) => user.id) }); I get the users as undefined as output. But when I use .then(res => res.data.map((user) => user.id)); I get the correct result as the ids. Can anyone help me understand this issue. I am very new to JS ecosystem.
you have to use return keyword . ()=>{ return something } But if you do . ()=> something It under the hood returning something but we can avoid return keyword as we are returning just one thing
Im loving your way of explaining things step by step on a level that can everyone understands no matter its a beginner or pro.
Thanks a TON, Man
A good teacher or say mentor is the one who teaches or explains the complex concepts in such a way which makes it easy to grasp and remember. You are on of those mentors !
Thanks and lots of Blessings
Thanks for all you do for the community
finally understand redux, thank you for your great courses
This kind of video are really useful, all we know official Docs still already there, accesible and updated...obviously that's the source of truth. Even though the way your drop explanations, step by step while dropping cons and pro about every single detail, it just really rocks.
Congrats Vishwas, because your teaching skills are just amazing.
The magic of createAsyncThunk().
Thank you, Vishwas. Your videos are the best ones here on yt.
You should demonstrate parameter reducers with an empty curly braces as required in createSlice to avoid typescript complaints.
Well organized tutorial playlist. THanks a lot for this!
Great coverage its excellent
Dude, the day you will deal with Solidity (Ethereum smart contract langage)like you usually do with react, I think your account is gonna hit 1 million subscriber...You are just the best in coding in my opinion...Web3 world is going to be huge...thank you for all thing you do...
Great explication, thanks you!!
muchas gracias Vishwas!
thanks bro very well explained!
Great, thanks! What is the name of this color theme?
For anyone wondering if you should use it for "isLoading (boolean)" as it is in this video - don't. Await/then "freezes" your app till it gets response from axios or fetch function, so the isLoading = true is not immediatelly refreshed in the component which uses it, and therefore you end up with loading message popping up on the screen for literally a microsecond. Use case shown in the video is strongly misleading and should be considered as a bug
I am working on a project which requires me to use a loading spinner. can you suggest an alternative for the approach shared by vishwas for the fact that you think this approach might be buggy?
Wish the videos would come in faster tho, been holding off on starting this series until all videos are uploaded
I love the way you are teaching, is there a chance you can cover thunkapi and thunkarg
Quick question, say, if createAsyncThunk and createSlice functions are in 2 different files, if there are n number of features, how we can relate or find which createAsyncThunk callback promise referring to which createSlice which has corresponding extraReducers, sorry if its sounds silly question
why does createasyncthunk needs to be added to extrareducers, not just reducers?
because actions are automagically generated by createSlice when you populated its reducer property with functions. these reducer functions of createSlice cant update the state in async mode. so the async function is handled by createAsyncThunk, which also automagically generations actions. These actions generated by createAsyncThunk are external to createSlice. so the only way for createSlice to respond to them is through extrareducers
How can you export userSlice.reducer when there is no userSlice.reducer? I only see a userSlice.extraReducers.
Same question 🙋♂
the way I understand it, the reducer (and action creator) is automatically created by "createSlice"
Any one else facing problem with payload = undefined??? if so then use Async Await instead of .then and it will work perfectly
Mine still isn't working 😣
what, now why would it work
oh it worked cuz async functions return promises while the function in video returns a number[]
I had this issue because of curly braces in the fetchUsers function : ... .then(res) => res.data.map(user )=> {user.id})
I removed it and it works : res.data.map(user=> user.id)) . Hope it's clear and helpfull
It resolved at 10:08
I am so lost now. I used to create slices in Index,js (store) and export actions. Then just dispatch those actions. This is something different, still trying to see what the heck is going on, is my learning outdated?
Sentences are missing some places in speech.
Hello Vishwash ji, How can I dispatch with a query object and handle the object inside slice file(where we are fetching data using)
I have question : if im using 3 addCase (fullfilled, pending and rejected), for each request, the code will get too large, any way to refactor it?
Hey, For one async api request, we have added three addCase function in builder. If I need to delete two more apis, like post and delete users then there will be six more cases in extra reducers functions?
getting
error : 'unexpected end of file'
Encoding issue with Brotli compression axios 1.2.1 either downgrade to an older version or add a custom header in the get function with headers: { 'Accept-Encoding': 'gzip', }
@@12345charliebrown thanks
@@cr7johnChan 1.2.2 just released now fixed
Good tutorial, its better if using typescript 😐
if we have to handle multiple async requests, how will reducer handle it? make multiple createAsyncThunk?
please make video about rtk interceptor
Good day! please add lessons for "how to use reduxToolkit with Next js" please, thank you for great work!
for anyone facing wierd errors! just delete the logger middleware
One doubt is from where the action.payload (without passing any value in dispatch) is fulfilled with user of array in this example
Response is the payload
what is difference between this tutorial and old tutorial ?
exactly :(
Old tutorial used pure redux & not redux-toolkit to make async action call.
redux-toolkit is just an abstraction on top of normal redux explained before.
how to add multiple action in extra reducer ?
How to access getState and getDispatch from createAsyncThunk?
i wonder why you didnt import to make the work more easier
excuse me, but why does the unsubscrible function called?
did u find the answer I have the same question
The answer I think It can be when the request is made we changed the state so the subscribe is called and when it is rejected then it called again and logged the state again.
But i'm not fully sure
Why are you still using require?
node environment
create async thunk fails for me
good🥰
is unsubscribe really needed to be removed for it to function properly?
@everyone
rtk query please with pagination data
didnt understand a thing, no idea
So much boilerplate tho, i think react query does all of that in like 5 lines of code.
Awesome +++++++++++++++++ 😃
React tool kit with redux saga can you please playlist
Can you do lessons on chat and calls like WhatsApp, please
The video isn't clear enough, but good job overall.
Hi vishwas why don't you show us async thunk fetching data by using useSelector and useDispatch hooks ! In ur react redux also u used this scenario only ! I hope u make a video on async fetching data by using hooks
Thanks very much for this great video. I don't know if anyone has encounter this problem store.dispatch(fetchUsers())
^
TypeError: fetchUsers is not a function. I downgraded to a v1.6.1 as suggested in a github pull request issue. But it doesn't seem to solve the problem and I'm using the LS version. Let me know if you have a solution.
I think you should check your import if it's correct or not
I have this issue did you solve it?
The redux tool kit is not good defined by you.
It is a series of amazing lectures… so I can understand the frustration if this is your first lesson
In the axios when I use
.then((res) => {
res.data.map((user) => user.id)
});
I get the users as undefined as output. But when I use .then(res => res.data.map((user) => user.id)); I get the correct result as the ids. Can anyone help me understand this issue. I am very new to JS ecosystem.
you have to use return keyword .
()=>{
return something
}
But if you do .
()=> something
It under the hood returning something but we can avoid return keyword as we are returning just one thing
so confusing take another course i recommended 😑😑