React State Management using Redux (Build a shopping Cart🔥 )

Поделиться
HTML-код
  • Опубликовано: 12 сен 2024

Комментарии • 211

  • @the_full_stack_junkie
    @the_full_stack_junkie  4 года назад +26

    GitHub Link:
    github.com/LloydJanseVanRensburg/ShoppingCart-Redux

    • @anthonyisrael6971
      @anthonyisrael6971 3 года назад +1

      You could do it with redux persist to keep the store, would that be great? github.com/rt2zz/redux-persist . Thanks, amazing tutorial

    • @chubbyBunny94
      @chubbyBunny94 3 года назад +1

      the starting files branch looks finised

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад

      Yes sorry about that.

    • @abodmedia
      @abodmedia 3 года назад +1

      you said u was gonna give us the code without redux in it

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад +1

      Ya sorry for that only realized a while after posting i never made starting branch

  • @thedevdj
    @thedevdj 3 года назад +15

    I was losing my mind trying to understand other tutorials on redux before watching this one. You gave me so much joy... God bless you for this.

  • @subramanyak6187
    @subramanyak6187 3 года назад +12

    this was the most amazing lecture I listened to till now.

  • @warrenprezydent2010
    @warrenprezydent2010 3 года назад +5

    Bro Redux was very hard for me until your video. Thanks to you, I feel more confident in using this technology. Now I can see a lot of advantages of using it.

  • @franciscastro5837
    @franciscastro5837 2 года назад +2

    Sir you have my respect, I watch many videos about redux and your explanation is top-notch. For me as a beginner I can easily understand what you are teaching compare to other channels their just blasting their keyboard and not explaining it. Thank you for your effort.

  • @alexmai2776
    @alexmai2776 2 года назад +2

    If you are new to Redux, this video is actually all you need. Helped me so much in my Redux project. Got clear explanations and the video length is perfect. Appreciated and subscribed xD!!!

  • @duredurrani
    @duredurrani 2 года назад +5

    Absolutely Masterpiece. I have watched more than 30 Videos on Redux all that all are just waste of time. They are designing HTML pages in Redux Tutorial and on other side you just focused on redux 🔥 I loved it.
    Thank you for valuing my time. Appropriate. Liked shared subscribed

  • @athulpk8530
    @athulpk8530 3 года назад +1

    bruhhhhh where was this video this much time , i wasted lot of my time watching useless tutorials and understand nothing but this video teach me everythinggggggggg thxx broooo next time if i have a doubt first place to visit is here

  • @PrinceKumar-vp9ou
    @PrinceKumar-vp9ou 3 года назад +3

    The way you implimented everything was awesome.... Thanks for giving these type of knowledge🤗🤗🤗

  • @ramzihammouda3938
    @ramzihammouda3938 3 года назад +7

    Great job. btw an hour is not considered long especially when you covered a lot of things in detail. It was really helpful. Keep up the good work bro

  • @shaiksamiulla6923
    @shaiksamiulla6923 3 года назад +1

    The best video to learn redux

  • @takurofisayo5601
    @takurofisayo5601 2 года назад +1

    You made redux look easy🥺

  • @SimPwear84
    @SimPwear84 3 года назад +4

    Dude! I learned a lot from this, your tutorials are amazing 🔥🔥
    Keep up the good work. Greeting from Cape Town ZA

  • @donovanshane2291
    @donovanshane2291 3 года назад +2

    You've gained a subscriber. Great tutorial, I learned a lot. Thank you!

  • @dbones-aow3
    @dbones-aow3 3 года назад +2

    Damn, so clear and straightforward.
    Keep them coming please

  • @hansalucas
    @hansalucas 3 года назад +1

    man I owe so much to you, I hope life pays you back 10 times more and I cant wait to be able to retribute to you when I get a job. Thank you!

  • @diegocamy8470
    @diegocamy8470 3 года назад +4

    Hey man, what's up? Great video, I just want to thank you for creating such an amazing video like this one to help other people

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад

      Thanks for the comment really appreciated it! So glad you found it helpful🤓🙏

  • @fragrantbloom
    @fragrantbloom 2 года назад +1

    Holy shit this was such an amazing video! This was not long at all, you explained everything in detail and on point. My only suggestion would be, please increase the font size so I can watch from mobile as well. Other than that this was amazing. I am going to watch again while working on my project now. Thank you :)

  • @ravindrakumarkushwaha1564
    @ravindrakumarkushwaha1564 Год назад +1

    You are very best as a teacher, thanks for your time❣

  • @ramnareshram74
    @ramnareshram74 2 года назад +1

    Very good implementation of shopping cart in React Redux. Thank you.

  • @shahzan525
    @shahzan525 3 года назад +1

    In 1 hr. What would you expect it's awesome ....👍👍

  • @codoof1
    @codoof1 2 года назад +1

    amazing tutorial dude, you really helped me figure out redux! lots of love

  • @khoilam7569
    @khoilam7569 3 года назад +2

    nice bro. I learn a lot from u. thanks so much

  • @genshinnoob.
    @genshinnoob. 2 года назад +1

    Awesome explanation that explained the complete cart setup using redux properly...

  • @KennyCha87
    @KennyCha87 3 года назад +3

    I want to say thank you!
    I have watch couples videos but still unable to get understand the state management in react, since I learned VUE first. The logic is the same but I would say the implementation of redux is more difficult than VUEX.
    But I fully understand after watching your video. It really helps, thanks for providing the great tutorial!!!!!

  • @ol1175
    @ol1175 3 года назад +1

    Thanks ,
    Would be really nice to see redux-toolkit

  • @ahanamallik340
    @ahanamallik340 3 года назад +1

    thanks a lot for such a clean, comprehensive and informative video

  • @carolinaloaiza2924
    @carolinaloaiza2924 2 года назад +1

    You are very good as a teacher, thanks for your time❣

  • @swagataSR
    @swagataSR 3 года назад +2

    wow man..Your channel is an absolute gem for beginners like us.. Keep up the good work .. Really appreciate it :)

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад +1

      Thank so very much going to upload more from next week thanks for this comment

  • @HashtagObi
    @HashtagObi 3 года назад +2

    don't apologise for the long video! just finished as i need the logic for an interview... i will come back in a week and let you know if i got the job!! (fingers crossed :D)

  • @akhilbisht
    @akhilbisht 3 года назад +1

    Your channel should have more subs. That was an awesome and on point video.

  • @sarojghising9877
    @sarojghising9877 3 года назад +1

    Thank you so much sir. I learned a lot from you. I understood mapDispatchToProps mapStateToProps now. Support from Nepal .

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад

      Redux Hooks are very nice as well and will make even more sense afrer understanding this video. Checkout Redux hooks. useSelector, useDispatch works lots faster

  • @fixcodedesign2165
    @fixcodedesign2165 3 года назад +1

    nice explanation I have ever seen. I watched so many video. sometimes what they explaining they don't know. Wish you good luck.
    Need another video for fetch data from the server and update

    • @fixcodedesign2165
      @fixcodedesign2165 3 года назад +1

      can we get a video about redux-thunk with axios ?

  • @dukeselwood
    @dukeselwood 3 года назад +1

    Great video, thanks! This has really helped clarify this process for me

  • @noobCoder26
    @noobCoder26 3 года назад +1

    Thanks for the video sir ..I really appreciate ur effort u made redux look easy >> Subscribed liked ,commented and also shared

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад +1

      Wow thanks so much champ really glad you found it helpful. Hope to contiue making helpful video content

  • @celeis100
    @celeis100 2 года назад +1

    Well paced, very informative tutorial, thanks!

  • @Dipenparmar12
    @Dipenparmar12 3 года назад +1

    Thanks for such a amazing video (plz don't worry about length its required because you covered almost all topic ) pretty much happy with this video....

  • @debaratighatak2211
    @debaratighatak2211 2 года назад +1

    it was a such a great tutorial, learned a lot✨

  • @digigoliath
    @digigoliath 2 года назад +1

    Awesome!!! TQVM!!

  • @shaikzuhair8537
    @shaikzuhair8537 2 года назад +1

    Good explanation

  • @blank2782
    @blank2782 3 года назад +1

    Great video. Thanks for all your hardwork

  • @125siddheshmhatre6
    @125siddheshmhatre6 3 года назад

    No one explain like this ❤️❤️❤️

  • @tahanamdar9322
    @tahanamdar9322 3 года назад +1

    That's Awesome

  • @oluseunakintayo3060
    @oluseunakintayo3060 2 года назад +1

    Exactly what I need!

  • @purvatekade3009
    @purvatekade3009 2 года назад +2

    Great tutorial man!!

  • @DcentMusic
    @DcentMusic 3 года назад +1

    Thanks Brother, Brilliant Explanation🤯

  • @resildacela1585
    @resildacela1585 3 года назад +1

    Great tutorial! It helped me a lot. Thank you!!

  • @ben-cb5er
    @ben-cb5er 3 года назад +1

    awesome video thank you! please do more videos on react or react/redux but from scratch with css....that way we learn more and easier to understand. thanks bro

  • @user-pg5kp5tg4g
    @user-pg5kp5tg4g 3 года назад +1

    Thank you, you helped me a lot !!!

  • @tusharvashistha3502
    @tusharvashistha3502 3 года назад +1

    your video is just perfect!!!,thanks for this video.

  • @duyenthang4624
    @duyenthang4624 2 года назад +1

    Great tutorial! Thank you!

  • @huseyinOzdogan83
    @huseyinOzdogan83 3 года назад +1

    Thank you brother,
    please keep going

  • @nethreen14
    @nethreen14 3 года назад +1

    Very helpful. Thanks for this

  • @sohammadhav3668
    @sohammadhav3668 3 года назад +1

    this was super helpful! thanks a tonne!

  • @shakibahmed8698
    @shakibahmed8698 3 года назад +1

    Nice Video great keep going. Can you convert vanilla redux to redux/toolkit. I hope I will get a good answer.

  • @muratwes23
    @muratwes23 3 года назад +1

    That was brilliant tuto brom well. Also is ur keyboard logitech? If is not can you share!

  • @isaacnavarro4614
    @isaacnavarro4614 2 года назад +1

    Muchas gracias!

  • @asfandkhankhan
    @asfandkhankhan 3 года назад +1

    I just want to say keep going! I really really like your teaching method. You are an amazing dude.

  • @callitservices2640
    @callitservices2640 3 года назад +1

    Uber Helpful,
    Are you in South Africa?
    Im about to use everything I just learnt!
    Whats Up from JHB South Africa!

  • @aestebanclchannel89
    @aestebanclchannel89 3 года назад +1

    Great job!

  • @priyatam17
    @priyatam17 3 года назад +1

    thanku so so so .,.much

  • @aneelachuhadhry3240
    @aneelachuhadhry3240 3 года назад +1

    Best tutorial thanks a lot

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад +1

      Thank you so much i hope to make many more of the best🤓 thanks for the positive comment!

  • @user-ei5lp3zu8m
    @user-ei5lp3zu8m 2 года назад +1

    cool

  • @blah9960
    @blah9960 3 года назад +1

    😍😍😍

  • @125siddheshmhatre6
    @125siddheshmhatre6 3 года назад

    Thank you soo much❤️❤️

  • @mdmustaqahmed5391
    @mdmustaqahmed5391 2 года назад

    hello sir.... great video ✨. but using useSelector and useDispatch things get little easy i guess because lot of people know redux working cycle so...

  • @khoilam7569
    @khoilam7569 3 года назад +1

    i want to asked you. at the 45:16p. i don't know at setCartCount(count) }, [cart,cartCount] ) ......***(cart ,cartCount)=> have what effect??***. am try delete this but nothing happen.

  • @petriwork7672
    @petriwork7672 3 года назад +1

    great stuff man! thank you!

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад +1

      My pleasure hope you found it useful

    • @petriwork7672
      @petriwork7672 3 года назад +1

      @@the_full_stack_junkie bro 1 question pls ? why do i see this ? Failed to compile
      ./src/redux/store.js
      Module not found: Can't resolve 'redux;' in 'D:\petry\shop\src
      edux'
      i think i installed eveything just fine.

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад +1

      I think this just has to do with the path you are specifying just make sure.
      Discord Link: (please send screen shot of further errors or issues here so that i can properly see and help)
      discord.gg/fGcx4whb

    • @petriwork7672
      @petriwork7672 3 года назад +1

      @@the_full_stack_junkie thanks for the fast reply bro, i was waiting in front of the pc :) will double check now.

    • @petriwork7672
      @petriwork7672 3 года назад +1

      did fixes from stackoverflow but none works.

  • @stafnykarkada3330
    @stafnykarkada3330 3 года назад +2

    The video was great, wish you had given the starter files too

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад +1

      Glad you liked it. Totally forgot about adding the starter files to the git repo, sorry about that. I will definitely keep this in mind for future videos👌

    • @stafnykarkada3330
      @stafnykarkada3330 3 года назад +1

      @@the_full_stack_junkie Thank you!

  • @mariamkulumbegovi9075
    @mariamkulumbegovi9075 2 года назад

    Great tutorial, thank u for the effort. One thing though, if i want to add for example color and size attribute in product when the user chooses from product page, how to implement that in redux

  • @messyice2524
    @messyice2524 2 года назад

    When i click add to cart only the qty shows in the cart array. i have [...item, qt 1] set up in the reducer. Need help.

  • @umerarain6814
    @umerarain6814 3 года назад

    If am using API initailstate{ product[] } then how get product ? Same way?

  • @mateogalic7128
    @mateogalic7128 3 года назад +1

    Really enjoyed tutorial! Thank you so much. I have just one question. We can now use hooks useSelector and useDispatch instead of connect function?

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад

      Yes that is correct and i suggest using the hooks instead this video was done a while back i should actually update on with hooks. But I am glad you found it helpful

    • @mateogalic7128
      @mateogalic7128 3 года назад +1

      @@the_full_stack_junkie Alright, thank you very much :).

  • @raomuhammadumarfarooq5421
    @raomuhammadumarfarooq5421 2 года назад

    sir your course is really amazing. you are true teacher, but here I have one question and that is, why are you not using provider tag instead, you are using connect from react-redux? here I am little bit confuse. otherwise all your course is really amazing.

    • @the_full_stack_junkie
      @the_full_stack_junkie  2 года назад +1

      Hey champ glad you liked it. This video was done before I have learned about hooks. But using hooks with redux is the new way of doing it. But with understanding this approach switch to hooks will be fairly simple

    • @raomuhammadumarfarooq5421
      @raomuhammadumarfarooq5421 2 года назад +1

      @@the_full_stack_junkie ohh i see.
      thanks i have understood. I will try to use provider.

    • @raomuhammadumarfarooq5421
      @raomuhammadumarfarooq5421 Год назад

      @@the_full_stack_junkie finally i completed this project and learn a lots of things within 3 days. thank you very much sir you are really nice teacher. i learn old method "connect" as well. but I replaced it with new hooks useSelector and useDisatch.
      but when I was adjusting the currentItem which was initially null, this thing make error that you cannot use map with null then I pass an empty array instead null value. and in shopping reducer inside return I pass and again array. like below
      initState = [
      currentItem: [ ]
      ]
      and in shopReducer
      const shopReducer = ( ) => {
      return {
      ...state,
      currentItem: [action.payload]
      };
      this thing solved my problem.
      but in null case I used old connect hook which was not giving this error because I tried connect hook with this null value mean it was working perfectly like yours.

  • @umerarain6814
    @umerarain6814 3 года назад

    How to set API data in Product [] array inside Reducer

  • @newssquad4346
    @newssquad4346 3 года назад +1

    you are awesome sir

  • @guntherrondina2190
    @guntherrondina2190 3 года назад +1

    Thanks Dude

  • @SanjeetCoder
    @SanjeetCoder 3 года назад +1

    hey, Your git file is not working properly, the page is coming with fully distorted

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад

      did you make sure you download the file correctly i just tested it by downloading the files and running npm install and all seems to work find on my side.

    • @SanjeetCoder
      @SanjeetCoder 3 года назад

      @@the_full_stack_junkie don't know, why i am getting distorted output,
      Actually when I used npm install I was getting error so I downgraded react-script version to 1.1.4 and after running npm start, I am getting distorted output

    • @SanjeetCoder
      @SanjeetCoder 3 года назад

      I download your git repo file two times but same output

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад

      I did not have to downgrade my react scripts package i just left it becuase it still works even with that vulnerability. If you would to build the project using create react app it should work fine. I am unfortunately not going to manually go and update the repos for all my videos every time a new React version or ipdate is released

  • @asifurrahman5436
    @asifurrahman5436 2 года назад

    if we refresh the data gone, so how do we save the current state even after reloading the page

  • @roei133
    @roei133 3 года назад

    How did you make the trash can? I really liked the animation .. can you show me please?

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

    From my side it saying that actions may not have undefined type property please can you tell me i strucked here. And one more is my action-types are importing from non-default exports can you please tell me i am waiting for your response

  • @aminatmoldalieva6385
    @aminatmoldalieva6385 2 года назад

    It is really useful but I am stuck... I don't know why but I can not show the data by mapping the products. how many hours I am stuck

  • @RavindraSingh-lp9pl
    @RavindraSingh-lp9pl Год назад

    cart has empty array [],howcome qty came ? please clear my doubt?

  • @kag3670
    @kag3670 3 года назад

    Hi, awesome content, why do u choose to pass ids in add activation if u have access to whole product object? you wont have to find it by id later if its already passed as whole.

  • @kenaida22
    @kenaida22 3 года назад

    Hello, I was unable to locate Redux Devtools extension for Chrome in 2021?

  • @soheiltehrani8834
    @soheiltehrani8834 3 года назад +1

    hi thank you!

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад

      All good champ. Hope you check out my newer videos their i use redux hooks which are pretty awesome🤘

  • @sethyates809
    @sethyates809 2 года назад

    Really great video, helped me so much! One question though, since React Routing v6 is out there is no more Redirect. How would you do change your code to fix that? If anyone could help me out with that, that'd be great.

  • @ivanbozveliev5335
    @ivanbozveliev5335 2 года назад

    Very good video thanks! But how can i embed dynamic data in products using fetch?

  • @sweetcatto
    @sweetcatto 2 года назад

    Hi, is there any way how we can implement the 'Empty cart' functionality? I tried but it emptied my cart as soon as I click on the cart tab.

  • @Kermin00
    @Kermin00 3 года назад

    Yeah, and from where i should take all of these starting files? Because on github there's a complete project.

  • @alexandergorin9963
    @alexandergorin9963 3 года назад +1

    Everything is good, but how to change button from "ADD TO CART" to "ADDED" to see the status of products: which ones were added to the cart?

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад

      Hi glad you liked it. Well you would have to do some check in the cart state to see whether it is already in there and then change the button text conditionally

  • @bikramghimire6598
    @bikramghimire6598 2 года назад

    00:52:50 why to add other dependancies like total, price, settotal, setprice if cart along can work?

  • @nihelboujelben2478
    @nihelboujelben2478 3 года назад

    thank you for this video, but when i am trying this code i have problem the basketProsps in console is undefined

  • @tech-trident1680
    @tech-trident1680 Год назад

    how the data is persisting here can you please tell me ??

  • @dashman2062
    @dashman2062 3 года назад +1

    Hello I am trying to follow this tutorial, I just downloaded the starting code and there are no images? Where did you get the images and where did u put them? Also in Cart.js it says item is undefined on this line:

    • @MrKrzysztof13
      @MrKrzysztof13 3 года назад

      I was having the same issue, did you end up fixing it?

    • @dashman2062
      @dashman2062 3 года назад

      @@MrKrzysztof13 no sorry:(. I moved on to something else in the end.

  • @bwwbali7372
    @bwwbali7372 3 года назад

    I have created an "ItemDetail" functional component which I "connect" export and from which calling and "add to cart" dispatch method gives me "(someAction).default is not a function error" . Any help ?

    • @bwwbali7372
      @bwwbali7372 3 года назад

      Maybe it would help someone. I finally resolved the issue by just differentiating the action object imported from the name of the function object in ItemDetail that is fired when "Add To Cart" is clicked/pressed(react Native)

  • @toluwalaseogunsola4972
    @toluwalaseogunsola4972 2 года назад +1

    Would this method work with graphql or other API’s

    • @the_full_stack_junkie
      @the_full_stack_junkie  2 года назад

      Yes graphql just way of ferching data. Check out apollo with graphql.

  • @codito7388
    @codito7388 4 года назад +1

    Nice!You haven't put local storage in order to be a very complete shopping cart. How can we put it?

    • @the_full_stack_junkie
      @the_full_stack_junkie  4 года назад

      That is correct i did not have it save to storage. If i would to complete the shopping cart i would use a backend and save the shopping cart details in a database.

    • @codito7388
      @codito7388 4 года назад +1

      @@the_full_stack_junkie How can you put local storage here. I redux is not so easy and cannot find tuts easy with local storage in redux. I created a same shopping cart and then followed dan abramov details about locale storage persistence but the drawback with his way is that it persist all the UI. Do you have a way in local sotrage with redux? For example in your tut how can we put the cart items to local storage?

    • @the_full_stack_junkie
      @the_full_stack_junkie  4 года назад

      I would have to go play around with this idea (should be just some basic javascript inside of the action functions) if this is something you are interested in i will make a video on this topic

    • @codito7388
      @codito7388 4 года назад

      @@the_full_stack_junkie yes it could be good. It is also something that you can't find easily on youtube about-redux and local storage. There are only tuts about hooks and class based comp which are simple. A good example is in the tut that you already have. Or make something else

    • @anthonyisrael6971
      @anthonyisrael6971 3 года назад

      @@codito7388
      you could use redux persist :) github.com/rt2zz/redux-persist

  • @muhammadyaqoob8000
    @muhammadyaqoob8000 3 года назад

    Where is the starter project?

  • @shaikhshoaib1989
    @shaikhshoaib1989 2 года назад

    I am getting error at {product.map} the error says cannot read properties of undefined ('map') can someone help me

    • @messyice2524
      @messyice2524 2 года назад

      you need to set product into an array {product:[ ] }