Learn Redux Toolkit in 1 video with Project | React Redux Toolkit |Redux Toolkit Tutorial

Подписаться 33 тыс.

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

50% 1

Hey Everyone,
In this single video, we are going to learn about redux toolkit and its important features with project implementations.
Along with redux-toolkit, will also learn about routing and react-bootstrap integration in React project.
If this video helped you , then show your love and support by giving like to this video and share with your colleagues/friends.
Prerequisite of this course is , you should know basics of React.
Checkout React playlist here..
• ReactJS Tutorial - Int...
#react #reduxtoolkit #redux

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

30 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@eggrat3381 Год назад

timestamps 3:40 - redux vs redux toolkit 8:07 - set up project 19:20 - baisc routing (react-router-dom) 26:30 - navbar 32:38 - understanding need of Redux toolkit 34:37 - installing redux toolki 37:21 - creating first slice (cartSlice) 43:19 - creating store 48:00 - redux dev tools 49:38 - calling actions 1:03:00 - Middleware (redux-thunk) 1:13:30 - create async-thunk query: can I use Tanstack query instead using the async-thunk when I am using redux toolkit in a project

@shrshr943 11 месяцев назад

,ŹE 1

@RajeshGeesala-x5s 5 месяцев назад

Thanks

@CodeWith-Lee Год назад

I wanted to say u are the only one on youTube explaining this topic like this step by step and clear ... Thank You for your effort..

@koremukesh8496 Год назад

Mam Please share the code ,It will be easy for reference

@newTechHub-l8e 4 месяца назад

or upload on git

@bishwajeetpandey1570 Год назад

Q》why we need to fetch the product data using redux-thunk Middleware, if we can fetch it at component level using using useEffect and useState ? Ans》beacuse by doing so we can store our product data at global level inside the redux store , so that any other component can easily get it or even modify it without the props drilling. Q》why we use Middleware ? ANS》only redux can't handle the asynchronous state updates so we indtroduce Middleware like redux-thunk or redux-saga to handle these asynchronous operations.

@Salah-YT Год назад

Thanks for this tutorial, it was super helpful. Towards the end, I encountered a minor issue while adding products. When I add just one product from each category, it works perfectly for removing them one by one. However, when I add multiple instances of the same product (e.g., 5 red t-shirts), I can't remove just one; it removes all of them. Just wanted to bring this to your attention. Nonetheless, I appreciate your tutorial!

@NaveenKolambage Год назад

same , i think its cause of how the remove function has been written.. I will try to fix it

@naganathan5312 Год назад

Thank you very much Nisha Singla. I learnt a lot from your videos, and your teaching approach is superb. I also saved your Instagram JS and React-related posts which were quite helpful. I believe you overlooked RTK QUERY. Could you possibly add an explanation video about RTK QUERY the next time?

@tajuddinakinsowon5617 5 месяцев назад

thank you for an educative tutorial. please I got stuck at the productSlice.js, after importing the initialState data using the useSelector. an error of map is not a function came up. and also at the redux extension it is given me {} object and not [] object. pls where did I get it wrong. thank you

@falashreeshirodkar1439 3 месяца назад

bestt video for redux toolkit

@kishanjotaniya855 5 месяцев назад

Finally some real world example on redux toolkit, been tired of watching those counter and todo examples nth times.

@TArtGallery Год назад

API is showing Loading only when , i am using create async thunk . Please provide solution

@sarthijoshi9995 Год назад

pinpointed accurate explanation at ease, explained in the very neat and clean way..many concepts cleared here. Big Thanks and keep it up, Nisha

@codewithAbdulMumin Год назад

OMG!!!.....best redux toolkit on youtube, detailed explanation. I have watch many many believe non is close to this. thank God I found you. thank very much.

@viralmoney8619 Год назад

Madam ji.. please explain how to use #reduxtoolkit⚠️ in angular as ngrx🙏

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

3:40 - redux vs redux toolkit 8:07 - set up project 19:20 - baisc routing (react-router-dom) 26:30 - navbar 32:38 - understanding need of Redux toolkit 34:37 - installing redux toolki 37:21 - creating first slice (cartSlice) 43:19 - creating store 48:00 - redux dev tools 49:38 - calling actions 1:03:00 - Middleware (redux-thunk) 1:13:30 - create async-thunk

@neerajagrawal709 Год назад

Hey Nisha, Nicely explained, I wanted to say you are the only one on youTube explaining this topic like this step by step and clear, Thank You for your effort.. please keep posting... create same with typescript also :)

@sabujdeeptudu6215 Год назад

Thanks, this video is one of the best i have came across! I was struggling to understand the Redux. but you have explained it very well.

@imonw3b 6 месяцев назад

Nice tutorials! Unfortunately, I'm having an error @ 1:12:00 ERROR products.map is not a function? Appreciate any help please. Thanks.

@black2thepiink 5 месяцев назад

yes i too encounter the same error

@imonw3b 5 месяцев назад

Already get this sorted. I can provide working codes if needed?

@sajalsharma185 3 месяца назад

same for me too, can u provide any workaround

@quvomiddinkamalov3292 Месяц назад

Thanks ma'am

@TArtGallery Год назад

PLEASE PROVIDE THE CODE

@lalala-sy3gr 11 дней назад

Unable to change the video resolution. Content is good. But seeing codes in poor quality make it bit complicated to catch it 😅

@rajranjan8984 10 месяцев назад

On clicking add to cart, a nested array of all data is passed to cart array

@saisankarc-h8k Месяц назад

Thank you soo much, it's very useful for me. Your explaining way is awesome😍

@ChandanNayak-u4z 28 дней назад

use the redux-persist here please because after refresh my page all the data is removing from redux memory. please please use the redux-persist and post one video means when i will refresh the page my data will not remove from my redux memory.

@aguud 10 месяцев назад

nice video

@chanduroyal4330 Год назад

Mam thank you so much, iam waiting for the redux class from you, finally you fulfilled my expectation

@NishaSingla Год назад

Enjoy..Keep learning 😀

@chintuadhana7075 Год назад

Really nice and easy to understand explanation of each and every line. Thank you for this video 😀😀

@prabhugoudabiradar2232 4 месяца назад

Nisha Singla your voice matches with Deepika's voice

@muthumaran4741 Год назад

Hi Nisha, I have one question after added the extra reducer you have removed everything from reducer. But fetch product doesn't throw any errors. For the the extra reducer how to declare below statement? export const { fetchProduct } = productSlice.actions;

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

Please make a video of the same application by using the next js application

@subhransusekharsahu6084 Год назад

mam but we can use thunk with extra reducer and put another product array inside the initial state like this:- const initialState = { product: [], cart: [] };

@apnacode8094 Год назад

Hey Sister , you're awesome. Thanks for sharing such a wonderful tutorial. i learned lot of from this tutorial and keep learnign with you ..

@terryvanker2643 6 месяцев назад

Hey, great video! Do you have a github, where i can look at the finished code?

@nishantsethi6625 3 месяца назад

thank you for the video, specially the last part of error codes globally

@inspirationalquotes5840 6 месяцев назад

if I add multiple items from the same products and then delete one of the them all the items will be deleted because they are having the same id

@joshuaI-y6b 4 месяца назад

when I refresh the Cart page, the added carts are removed. How to fix it mam?

@sukhukasani7361 Месяц назад

What about useReducer hook ? It also does the same right ?

@VaibhavPrasad Год назад

You explain really well..!! Thankyou for making it so easy.

@U2011-n7w 8 месяцев назад

best video on redux-toolkit on youtube

@Global-Motivational-Hub Год назад

it is one of the best redux tool kit project for beginner easy to understand way of explanation... thank you very much... i have watch many videos but i can't understand clearly... but in this video clear my all doubts...

@kidschannel7643 Год назад

Are u explain about redux toolkit scratch to advance?

@MayankAgarawal Год назад

Than key you madam.. what i need exactly you explain that..

@urwithsai 4 месяца назад

Fabulous tutorial, do you have the url to the codebase by chance?

@BioChemAcademy 22 дня назад

hallo teacher ( i need this all code if is it possible push it to git hub )

@sarthijoshi9995 5 месяцев назад

I was back again after 8 months and let me tell all that this is the BEST video where I found everything in structured manner. No confusion in understanding and learning this things in one shot.. Thanks Nisha, keep it up with good videos

@add-ontutorials5730 2 месяца назад

great video , kindly share the source code or git link

@inspirationalquotes5840 6 месяцев назад

im getting an error at 1:11:54 the error: products.map is not a function

@inspirationalquotes5840 6 месяцев назад

you are using {data: products} as an object, then you are mapping through that object which causing the error, but how to solve you it.

@urstruelyshanmukha6079 6 месяцев назад

@@inspirationalquotes5840 add the await keyword before data.json(), ensuring that the thunk waits for the JSON data to be parsed before dispatching the action. This should resolve the issue you were encountering with products not being fetched correctly. const result = await data.json();

@Brijeshkumaryadav0412 6 месяцев назад

@@urstruelyshanmukha6079 thanks it solved the issue

@ravinandanahs Год назад

Thanks you so much madam for this vedio. please upload more on reactjs with typescript concepts

@NishaSingla Год назад

Thank you 😊

@Looser_alpha 2 месяца назад

Try to call api in redux by the help of api handle

@antasjain 13 дней назад

This is a tutorial worth following to a T.

@saumitk8744 Месяц назад

1:02:00 make api calls using middleware

@rayeesdot310 2 месяца назад

Thanks for your hard work.

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

Is there any git code base for above project

@ashishhverma 2 месяца назад

To the point explaination and tutorial…

@anandgarikapati3769 Год назад

Really loved the video. Great content for free . Please keep posting videos regularly ❤❤

@demogyani2419 Год назад

Saga or thunk I don't understand storing your api responses in redux. It makes you app bulky and performance is degraded. Imagine 50 different api calls data are stored in local storage. If you want to share the state between components only then use redux. Don't use it to segregate your api logic from component.

@NishaSingla Год назад

Yes absolutely, redux is meant to be use only for such use-case where data frequently need across the components I have mentioned it in session 😀

@ManoharBatra 11 месяцев назад

this is very good video... happy to collab with you

@singsarav 11 месяцев назад

may I get source code (github)

@karankoli4738 9 месяцев назад

Mam how to get first job please suggest

@nithish1742 Год назад

One of the best explanation i have ever seen. Thank you so much

@supershinobi7892 25 дней назад

after 1:18:01 voice had gone

@sureshbethanabelli2080 8 дней назад

Hi Nisha, I'm a huge fan of yours! I've been learning from your Angular videos, and they are really helpful. Thank you so much for creating them🥀

@MahendraUmare-i8g 3 месяца назад

Please make video series on Node Js

@mesbol 5 месяцев назад

it was very useful thanks

@abhishekojha1837 3 месяца назад

My routing part is not working

@aswinvignesh3985 Год назад

Absolutely The Best ! Subscribed within 30 mins of content , and now completed . Great line to line explanation with unusual development project in a very understandable manner . Thank you so Much !!!!!!!!!!!!!! Keep Going Maam

@kanchanmatai4170 6 месяцев назад

Really fantastic video on Redux toolkit with project......understood well....but voice got lost before when you were explaining about the loading status.....

@Mrpuli 28 дней назад

Thanks 🙏

@rumankausar2457 8 месяцев назад

please share the code link

@dibyendudhauri Год назад

Thanks ma'am, I'm Just waiting for this tutorial. ❤

@NishaSingla Год назад

Glad to know ..keep learning 😀

@azattitiz5721 Год назад

Cannot read properties of null (reading 'useCallback') at 15:19 TypeError: Cannot read properties of null (reading 'useCallback') error

@sriharshas3889 2 месяца назад

great explanation !

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

Excellent explanation but i have one query that after adding product to the cart they are adding but not displaying image,price n title... After clicking on remove button all the items are removing from cart...plz help

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

Source code kaha hai?

@BhavinBhuva-y5h 4 месяца назад

great explanation......

@Kiranruthala 10 месяцев назад

thank you sister☺

@sarveshpatil1072 8 месяцев назад

Your course really helped a lot to know the redux/toolkit and RTK, But I'm facing some challenge to convert app code along with redux/toolkit to ES5, because application must support on IE mdoe in Edge browser, Kindly, express your thoughts on this challenge

@yogesh1495 3 месяца назад

Perfect video to understand React Redux Toolkit, Thanks Nisha

@NdubuishiUlenu 10 месяцев назад

Thank you so much ma'am.I really had a hard time understanding redux, however with your tutorial all the core concepts have been demystified.Thank you so much & please continue to drop more contents like this.The audio was however broken around where you were handling the promise errors, you may want to fix that.👏👏👏🤏🤏🤏🤏🙏🙏🙏🙏

@opots Год назад

Awsome tutorial, just one question, why didn't you just use import { BrowserRouter, Routes, Route } from 'react-router-dom'; for your routing?

@NishaSingla Год назад

That was in older version of react-router-dom

@opots Год назад

@@NishaSingla also, there is a createApi hook in reduxt toolkit, seems can provide cleaner code. And the last question, if you add same items in the cart, how are you gonna handle the key, and removing one by one?

@gulzarahamed1152 11 месяцев назад

Hi, mam can you quickly suggest me why all the action type shows twice every time which means that many times we are calling it? kindly any one clarify my doubt because I'm firebase's firestore to get data from backend I have limited quota for get request

@HakobHakobyan-w3u 7 месяцев назад

npx create - what ????

@samugwu8350 Год назад

pls can i have the codes

@m__link6499 Год назад

That's by far one of the best explanatory video I've seen one you tube about redux toolkit...thank you madame...But I have one question : what 's the purpose of the second part of this video whereas you have already fetch the data from an API? I mean, why make an API call with the help of Redux toolkit?Does the first method is not enough? thank you.