Hope you enjoyed the Redux Toolkit Introduction. Check the whole playlist here: ua-cam.com/play/PLbISvIqMwJh2FwM2G1lyTDJDg7Fyrv3Aj.html Don't forget to subscribe to the channel and let me know here in the comments if you enjoyed the video.
This is very helpful. Thank you for introducing 'createEntityAdapter', it makes coding efficient. Thank you very much for demonstrating a well thought out Todo list. Please do continue to make videos that really do make RTK clear.
What a wonderful tutorial, I'm confusing about using this approach when sending data to the server, where can I put the axios methods in redux toolkit?
Hi. I'm glad you enjoyed it. There are two ways to do it - - using redux thunk middleware which is already added by RTK. Check this video: ua-cam.com/video/mPBLXWgD1Vc/v-deo.html - for more complex apps you use redux saga. Here is a video of how you can replace redux thunk with saga: ua-cam.com/video/tQDQIK1fevk/v-deo.html You will probably want to go with one, but the second one is worth checking out
You can check a short example here: codesandbox.io/s/sweet-morning-4t5gl?file=/src/store.js A full example will be up in a future video on this channel so make sure you're subscribed to be notified when I release it! :)
I'm at the beginning of the video, one note about installing dependencies, you don't need to install 'redux' if have @reduxjs/toolkit. @reduxjs/toolkit contains 'redux'.
Great tutorial bro! Hey, I'm trying to implement a feature where you show items that are completed, active, or all. How would you go about implementing such feature? After many attempts I was unsuccessful
Hey there! It should be just something in the display component. First have a state that handles which you store if you display all, completed or active. Then In the TodoList component, where you loop over all the elements you should do the todoList.push() conditionally. So something similar like this if((shouldDisplay === "completed" && todoItem.completed === true) || (shouldDisplay === "active" && todoItem.completed === false) || shouldDisplay === "all") { todoList.push(...)} This should work. Let me know if you try it out how that works for you :)
@@RaulTerhes bro you're an 😇 thanks for your help! Would be cool if did a codepen with this feature in your to-do list app so that everyone can see it if they ever want to implement such or similar feature
Hi, at 24:56 minutes why don't you use todoSelectors.selectAll? why do you use todoSelectors.selectEntities? if you use selectAll you can directly map it to the component, so you don't have to use loops and create a local state there.
hi sir... × Error: Invalid hook call. Hooks can only be called inside of the body of a function component. i got this error at 15:08 while submiting.. my code is fime i checked twice in vs code also its not showing me any error but in browser its throwing me eror
plz some one help me...i am getting these error..store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
Hey There. Make sure in store.js that you pass the values correctly to configure store like below (an object with the reducer key that is also an object to which you add your reducers): const store = configureStore({ reducer: { todos: todoReducer }, }); Also check in your todoSlice.js to have the reducer correctly exported (here you can find the final version: github.com/raulterhesdev/redux-toolkit-crud-todolist/blob/main/src/store/todoSlice.js)
Hope you enjoyed the Redux Toolkit Introduction. Check the whole playlist here: ua-cam.com/play/PLbISvIqMwJh2FwM2G1lyTDJDg7Fyrv3Aj.html
Don't forget to subscribe to the channel and let me know here in the comments if you enjoyed the video.
Great video. Another one about RTK Query will be highly appreciated..
Excellent explanation. I will suscribed waiting for RTK videos in the future
thank you raul that was very helpful I couldn't find any tutorial for this topic better than yours
This is very helpful. Thank you for introducing 'createEntityAdapter', it makes coding efficient. Thank you very much for demonstrating a well thought out Todo list. Please do continue to make videos that really do make RTK clear.
Thank you and I'm really glad you like it. I will make more videos like this.
This is very helpful. Thank you very much
I am really glad you liked it!
Great Video! Really helpful.
Glad it was helpful!
What a wonderful tutorial, I'm confusing about using this approach when sending data to the server, where can I put the axios methods in redux toolkit?
Hi. I'm glad you enjoyed it. There are two ways to do it -
- using redux thunk middleware which is already added by RTK. Check this video: ua-cam.com/video/mPBLXWgD1Vc/v-deo.html
- for more complex apps you use redux saga. Here is a video of how you can replace redux thunk with saga: ua-cam.com/video/tQDQIK1fevk/v-deo.html
You will probably want to go with one, but the second one is worth checking out
@@RaulTerhes thank you so much👍
@@RaulTerhes if you have a time, could you provide a simple example to this beautiful project
You can check a short example here: codesandbox.io/s/sweet-morning-4t5gl?file=/src/store.js
A full example will be up in a future video on this channel so make sure you're subscribed to be notified when I release it! :)
@@RaulTerhes wow, the example is perfect, thank you so much Raul
Great video , thank you very much 👍
Great video, really educative and practical...keep them coming!!
Thank you! Happy you enjoyed it!
I'm at the beginning of the video, one note about installing dependencies, you don't need to install 'redux' if have @reduxjs/toolkit. @reduxjs/toolkit contains 'redux'.
Thank you for pointing this out!
Great tutorial bro!
Hey, I'm trying to implement a feature where you show items that are completed, active, or all.
How would you go about implementing such feature? After many attempts I was unsuccessful
Hey there!
It should be just something in the display component. First have a state that handles which you store if you display all, completed or active. Then In the TodoList component, where you loop over all the elements you should do the todoList.push() conditionally. So something similar like this
if((shouldDisplay === "completed" && todoItem.completed === true) || (shouldDisplay === "active" && todoItem.completed === false) || shouldDisplay === "all") { todoList.push(...)}
This should work. Let me know if you try it out how that works for you :)
@@RaulTerhes bro you're an 😇 thanks for your help!
Would be cool if did a codepen with this feature in your to-do list app so that everyone can see it if they ever want to implement such or similar feature
@@atheistcrusader1160 Sure thing. I will give it a thought and either make a video or just a codepen and link it in the description
Nice, Thank you
Thank you! This video was very helpful!
I am happy you enjoyed it! If you have any questions about it you can drop them here and I'll try to answer them
Hi, at 24:56 minutes why don't you use todoSelectors.selectAll? why do you use todoSelectors.selectEntities? if you use selectAll you can directly map it to the component, so you don't have to use loops and create a local state there.
Hey there! You are totally right, I didn't realize until now that I overcomplicated that part unnecessary. Thank you for pointing it out!
how can you combine entityAdapters, createAsyncThunk and extraReducers?
hi sir...
×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
i got this error at 15:08 while submiting..
my code is fime i checked twice
in vs code also its not showing me any error
but in browser its throwing me eror
Sound is low
How can i update the name ?
plz some one help me...i am getting these error..store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
Hey There. Make sure in store.js that you pass the values correctly to configure store like below (an object with the reducer key that is also an object to which you add your reducers):
const store = configureStore({
reducer: { todos: todoReducer },
});
Also check in your todoSlice.js to have the reducer correctly exported (here you can find the final version: github.com/raulterhesdev/redux-toolkit-crud-todolist/blob/main/src/store/todoSlice.js)
@@RaulTerhes thank you sir
instagram?
Hello. Sorry I am not on Instagram
@@RaulTerhes ok!
Your sound levels are too low. Test your videos before uploading.