Full CRUD To Do List Application | createEntityAdapter | Redux Toolkit Introduction | React

Подписаться 1,4 тыс.

Просмотров 13 тыс.

50% 1

Create a CRUD (Create, Read, Update and Delete) application, without having to write any Redux reducer logic, using createEntityAdapater. Finalize the Redux Toolkit Introduction with a full To Do List Application that will help you understand the main features of RTK.
If you wish to support me by buying me a coffee, thank you very much for the support!: www.buymeacoff...
Redux Toolkit Introduction playlist: • Redux Toolkit Introduc...
❗️Don't forget to:
✔️Subscribe to the channel for future videos
✔️Like the video so I know to make more videos like this
✔️Leave a comment and let's chat about this
📚 Resources:
📘 Code: github.com/rau...
🚀 Follow me:
✔️ Blog: raulterhes.com
✔️ Twitter: / raulbterhes
✔️ Facebook: / raulterhesdev
✔️ GitHub: github.com/rau...

Опубликовано:

30 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@RaulTerhes 3 года назад

Hope you enjoyed the Redux Toolkit Introduction. Check the whole playlist here: ru-vid.com/group/PLbISvIqMwJh2FwM2G1lyTDJDg7Fyrv3Aj Don't forget to subscribe to the channel and let me know here in the comments if you enjoyed the video.

@bojanmitic8822 3 года назад

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'.

@RaulTerhes 3 года назад

Thank you for pointing this out!

@hemanth6951 3 года назад

Sound is low

@wishmeheaven 7 месяцев назад

Great video. Another one about RTK Query will be highly appreciated..

@dianwijaya1604 3 года назад

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.

@RaulTerhes 3 года назад

Hey there! You are totally right, I didn't realize until now that I overcomplicated that part unnecessary. Thank you for pointing it out!

@imjusthereforlolz 2 года назад

Your sound levels are too low. Test your videos before uploading.

@MahmoudSY-f3s 4 месяца назад

Nice, Thank you

@talksister4496 3 года назад

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.

@RaulTerhes 3 года назад

Thank you and I'm really glad you like it. I will make more videos like this.

@rabindranathferreira6135 2 года назад

how can you combine entityAdapters, createAsyncThunk and extraReducers?

@eribertmarquez452 Год назад

Excellent explanation. I will suscribed waiting for RTK videos in the future

@victoryyugeshre-turns2498 3 года назад

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

@atheistcrusader1160 3 года назад

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

@RaulTerhes 3 года назад

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 :)

@atheistcrusader1160 3 года назад

@@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

@RaulTerhes 3 года назад

@@atheistcrusader1160 Sure thing. I will give it a thought and either make a video or just a codepen and link it in the description

@ayodeleabayomi3024 3 года назад

Great video, really educative and practical...keep them coming!!

@RaulTerhes 3 года назад

Thank you! Happy you enjoyed it!

@talksister4496 3 года назад

This is very helpful. Thank you very much

@RaulTerhes 3 года назад

I am really glad you liked it!

@behnamrhp9991 2 года назад

thank you raul that was very helpful I couldn't find any tutorial for this topic better than yours

@keyurhardas 3 года назад

Great Video! Really helpful.

@RaulTerhes 3 года назад

Glad it was helpful!

@ABsazerNer 3 года назад

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?

@RaulTerhes 3 года назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mPBLXWgD1Vc.html - for more complex apps you use redux saga. Here is a video of how you can replace redux thunk with saga: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tQDQIK1fevk.html You will probably want to go with one, but the second one is worth checking out

@ABsazerNer 3 года назад

@@RaulTerhes thank you so much👍

@ABsazerNer 3 года назад

@@RaulTerhes if you have a time, could you provide a simple example to this beautiful project

@RaulTerhes 3 года назад

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! :)

@ABsazerNer 3 года назад

@@RaulTerhes wow, the example is perfect, thank you so much Raul

@ahmedayman9917 2 года назад

Great video , thank you very much 👍

@mustafamufeed4719 3 года назад

How can i update the name ?

@victoryyugeshre-turns2498 3 года назад

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.

@RaulTerhes 3 года назад

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)

@victoryyugeshre-turns2498 3 года назад

@@RaulTerhes thank you sir