I, for one, am super grateful that you did redux toolkit here! Thank you so frickin' much for all the hard work you do in this channel. To all the newer developers: I used to HATE Redux. Its one of the harder front end technologies to really get to like. BUT once you have a use case for it, Redux is AMAZING. This project doesn't NEED redux, but its easier to see Redux on a simpler project. Plus there are already a million React todo lists. The fact that Brad takes the opportunity to teach Redux here as well shows what a pro he is!!! Brad, you are my hero!
@kenthankgod2619
Жыл бұрын
I'm on the path to learning redux right now, and seeing that someone also didn't like redux before and now loves kind of makes me ease off a little bit haha, thanks for your encouragement and yes Brad is the best no cap
@jaymarpabayo
Жыл бұрын
Im currently learning and its so confusing ngl 😂
@chrisstucker1813
Жыл бұрын
What would u recommend for a project like this, a simpler redux frame work like easy-peasy or context api?
@CodewithAby
2 жыл бұрын
I'm definitely going to re-watch this a few times...there's lot of information to take in, especially on redux. Thank you so much for your fantastic tutorial.
@dougiehawes916
2 жыл бұрын
When watching this I thought I best rewatch this while not coding along.
@jesseemana9598
2 жыл бұрын
@@dougiehawes916 this is a proven strategy actually
@tomasburian6550
2 жыл бұрын
@@dougiehawes916 Alternatively, you can try to watch, then try to remake it without watching and if you get stuck, refer to the video. That works the best for me, just trying to piece it together again only by mental guidance.
@RomanKnav
2 жыл бұрын
i recommed writing down a bunch of comments if you're coding along!
@thehamzajunaid
2 жыл бұрын
@@tomasburian6550 best way to learn from youtube yess
@kr9091
2 жыл бұрын
To remove the import for react just go to your settings and uncheck "Import React on Top" and that will fix it. Apparently they changed the behavior in V4 of the extension.
@RameshKumar-mv3jd
2 жыл бұрын
Alternatively, add "reactSnippets.settings.importReactOnTop": false, to your settings.json file.
@cramsarmiento349
2 жыл бұрын
For those of you who got error 404 at 59:00 where you hook up Register form, just restart your server and client. I don't know why it work with Brad, but I did follow his process twice and got the same result. According to Google, it seems that when adding the proxy line in the frontend/package.json, you need to restart the app. I am not a pro, so if I have missed something or I am completely wrong with this, I would be very happy if someone would correct me. BTW this channel is awesome.
@dokidoki408
2 жыл бұрын
Thank you for this, I was wondering why it wasn't working. Until I saw your comment. What a wonderful community this place is. And once again great video and channel @TraversyMedia
@encabsss
2 жыл бұрын
Thanks for the heads-up!!!
@josemontes530
2 жыл бұрын
I still get a bad 404 after doing this. By restart, you mean ctrl+C, then npm run rev again?
@techaddictdude
2 жыл бұрын
@@josemontes530 Yes, terminate the current running process and run the dev server again by using "npm run dev".
@cramsarmiento349
2 жыл бұрын
@@josemontes530 yep
@rijalislami9742
2 жыл бұрын
In case logout is rejected in 1:07:20 , add logout inside authService object in authService.js
@KalebLaBarrie
2 жыл бұрын
Thank you!
@R0ckKing
2 жыл бұрын
Thank you! This was driving me crazy.
@vonderklaas
2 жыл бұрын
❤
@devindersingh7155
2 жыл бұрын
Love you maan
@maaziy_ghaziyIYI
2 жыл бұрын
Thanks dude. You're a smart cookie my man!
@dougiehawes916
2 жыл бұрын
I've been refreshing your homepage every couple of hours for the last day waiting for this video. I've always admired your work, and glad to see a fresh look which considers the recent changes to all the dependencies (esp, react-router-dom being a bit of a diva recently).
@prestoncammarata5780
2 жыл бұрын
Dude i was refreshing his channel everyday too waiting for this haha.
@buildit8649
2 жыл бұрын
Same here too
@azizbekkomilov3589
2 жыл бұрын
@@prestoncammarata5780 ok
@bufootballa
2 жыл бұрын
Quick note if using 'yarn' instead of 'npm' to run the 'client' command or the command w/concurrently. With yarn, you need to use '--cwd' instead of '--prefix' shown used with npm. The command to only run the client should be "yarn --cwd frontend start" while the command to run both the FE and BE servers w/concurrently should be "concurrently \"yarn client\" \"yarn run server\""
@mathreview2528
Жыл бұрын
you are the best and the most honnest when it come to all the details you provide in these incredibly well structure, easy to follow series. Thank you for all your efforts.
@aysiofficial4283
2 жыл бұрын
Frankly speaking Brad is not just a good teacher, but also a nice content creater. Respect!
@UmarMunir94
2 жыл бұрын
No one else teaches all the best practices and production level practices so we are stuck with figuring out how to implement what they teach in our personal projects since they themselves say "I wouldn't do this in a production level project" and they wouldn't show what they'd do in a production build. Traversy Media is the best resource because you not only teach so much better but you also fill all those gaps. What you teach is "actually useful" since you're showing the practices and structure you'd normally follow in your own projects. Love that!
@shivani9840
2 жыл бұрын
Hey Umar! Do you usually learn through these online tutorials ? Have you created any projects? Would you be interested in exploring opportunities in web development?
@vikasni95
2 жыл бұрын
There is something special about this legend, even a hard topic becomes very easy when we see his videos
@shivani9840
2 жыл бұрын
Hey Vikash! Do you usually learn through these online tutorials ? Have you created any projects? Would you be interested in exploring opportunities in web development?
@stephensvetlovics1799
2 жыл бұрын
Dude, you are awesome, you know this stuff so well, and you explain everything, even stuff most ppl wouldn't. it helps to understand it so much better. Thanks for all your time and effort!
@nadetdevfullstack7041
2 жыл бұрын
At 1:07:20 , The button Logout does not work. Redux DevTools said auth/logout/rejected I added const authService = { register, logout, }; line 21 in AuthService.js. And there it worked. My browser is Opera. After this modification, everything works fine. Excellent Brad !
@okol5211
2 жыл бұрын
many thanks.. i was stuck there for an hour!!
@akashks3261
Жыл бұрын
Tnx bro
@odeddugma9748
2 жыл бұрын
Brad, I must thank you for the last 3 videos. I bought your React course (and your bootstrap course as well) but didn't have the time to start. Tow days ago I got home assignment for a new position, requiring using Node, Express, React, and Redux. Your last videos are most helpful for my assignment (And I promise to start the full course ASAP). You are the BEST teacher!!! Thank you 🙂 P.S. It might be a good idea to take some home assignments that were given for junior positions and solve them in a few videos or a course (I'll be the first to buy and recommend). It is practical for juniors looking for first positions.
@8ctrl763
2 жыл бұрын
Did you land it?
@odeddugma9748
2 жыл бұрын
@@8ctrl763 Yes, but I didn't continue with them 🙂
@8ctrl763
2 жыл бұрын
Congrats
@mpb0406
2 жыл бұрын
Putting these videos out faster than I can study them. Great stuff as always!
@nozoke
2 жыл бұрын
Hey everyone, at 8:40 to stop importing 'react' on the first line, open VS Code Preferences and type 'Import React On Top' into the search bar. Then uncheck that box and restart VS Code. Now there'll no longer be import React when using the 'rfce' shortcut. This happened because of the extension update that removed underscores. Take care!
@chrisc.4144
Жыл бұрын
Absolute legend. Thank you !
@davronsulaymonov116
2 жыл бұрын
If you have a cors error (network error in toastify) You should install cors package and give access to localhost:3000 1 npm i cors //in main package.json 2 Add middleware in server.js file const cors = require("cors") const whitelist = ["localhost:3000"] const corsOptions = { origin: function (origin, callback) { if (!origin || whitelist.indexOf(origin) !== -1) { callback(null, true) } else { callback(new Error("Not allowed by CORS")) } }, credentials: true, } app.use(cors(corsOptions))
@iraklibochorishvili9007
2 жыл бұрын
Thank you 🤩🤩
@86thecake
2 жыл бұрын
Hmm, this isnt fixing it for me. Am I installing cors in the root directory?
@davronsulaymonov116
2 жыл бұрын
@@86thecake yes install cors in root directory. And sure to run react application in localhost:3000 not 3001 or you can add other hosts in whitelist in server.js
@86thecake
2 жыл бұрын
@@davronsulaymonov116 think you can share your repo? I'd like to reference your server.js file. Thanks!
@Chriss-cn1ch
2 жыл бұрын
Why would you even install Cors, if you already added the proxy in the package.json?
@filledaprilli2190
Жыл бұрын
I‘m grateful and going to cry because I find all I need to learn and learnt a lot in your channel!!
@samdeng2793
2 жыл бұрын
you are the one, I'm literally stuck at this part and was just searching for answer and I saw you post this video like 46 seconds ago.
@randomcell708
2 жыл бұрын
Very well explained, excellent teaching style with perfect pace and delivery. Brad, you were born to teach!
@regilearn2138
2 жыл бұрын
please consider adding **unit test (react testing lib) and end to end testing cypress** for this project and **CI/CD with ngnx**
@mr.komp1004
2 жыл бұрын
That would be awesome, if he would do it
@shawngardiner2604
2 жыл бұрын
That would be nice!
@patrickjreid
2 жыл бұрын
OMG that would be a great follow up to this amazing series!!!
@tanner8291
2 жыл бұрын
I’m doing this in my own version stemming from this mini course. It is really important to know - I hope Brad does this more often in future courses! I know he can do all that too 😂
@alexbarkhatov
2 жыл бұрын
43:24 is a perfect use case for optional chaining (?.). Thank you for your great content.❤
@guyrandalf711
2 жыл бұрын
Brad is thanking us.. guys can you hear that? Brad is thanking you for staying this far!!! You're about to get me a react job and he's thanking me. How are you this humble Brad? You're the best!! Thank you so so much
@aldolhitlercondensation1363
2 жыл бұрын
Did you make the cut for the job? and indeed, he's very humble. P.S I've seen a couple of comments here thrashinf redux, I'm fairly new to web dev, do I just go on with the video
@alimamedov9684
2 жыл бұрын
Brad, you are our super hero! Thanks for sharing and teaching us very useful things! ♥
@edwardburroughs1489
2 жыл бұрын
This might be a stupid question but how can we import authReducer into the store file when it doesn't appear to be exported from anywhere???
@lukasluftlaufer1093
2 жыл бұрын
I can already feel, this is a gold tutorial! Thanks a ton, Brad!
@mohitsaud2071
2 жыл бұрын
Yes, I was waiting for this for the last couple of days. Thanks, Brad, will complete this tomorrow.
@martintreeman6531
2 жыл бұрын
When JWT expires, there is a slight problem - Redux keeps trying to connect with that expired token, the backend is refusing but then redux is again trying to connect, so it keeps pending-rejected-pending-rejected infinitely. Any way to prevent that infinite loop? (To stop this you need to delete your cookies)
@codernerd7076
2 жыл бұрын
Thanks for this video and keeping putting this high quality on KZitem!
@victortang94
2 жыл бұрын
Three years ago I followed through your previous MERN stack series. Today I wanted to create a MERN stack app and I am here!
@aminjafer4535
Жыл бұрын
This series needs more views, seriously! Just Fantastic!
@davidmichaelhastings
2 жыл бұрын
If you change your .env file make sure to restart the application or you may end up chasing your tail for 15 minutes like I did. lol. Thanks for the videos Brad. LOVE the channel!
@jewkeynoh
2 жыл бұрын
I have this error "Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:" Anyone know how to fix it? HAHAHAHA I installed axios and react-toastify in backend lol my bad
@k-ad4161
2 жыл бұрын
Thank for all your help Brad !!
@jlambert12013
2 жыл бұрын
As much as I love watching Brad's videos, I wish people making tutorials would turn off the popup hints.
@CapoeiraNico
2 жыл бұрын
you mean like when you pause the video coz you want to read what's on the screen,, it's an art to pause the video at the right moment so the popup of vscode won't show up ahah
@devevolution5836
Жыл бұрын
Thanks for this master piece. i need to rewatch this.
@The1U22
Жыл бұрын
At the end you thank us for "sticking through this very far" Thank you for putting out this free content
@sanky6114
Жыл бұрын
at 59:40 if you're getting an error .. " Can't destructure user from redux coz it is undefined " then use aync await ..in the useSelector line ... const { user, isLoading, isError, isSuccess, message } = useSelector( async (state) => await state.auth )
@oltlatifi4870
2 жыл бұрын
This is one of the best, if not the best tutorial series I've ever seen.
@cubedev4838
2 жыл бұрын
This kind of series very meaningful than just short video everything in 1 minutes.
@Gester2000
2 жыл бұрын
man i am at the 59th min register page is not loading when i am checking the registration page
@dcmbassi
2 жыл бұрын
For some reason, despite the "proxy" entry in the frontend package.json, axios was still addressing requests to localhost:3000. I ended up using axios.defaults.baseURL (along with cors on the server) to fix the issue. I'm having a great time with this series. Thank you, Brad
@davidmichaelhastings
2 жыл бұрын
Did you ever change your env file to possible use 5000 and not restart the server? Just asking because i found myself with the same issue.
@dcmbassi
2 жыл бұрын
@@davidmichaelhastings No, I restarted every time I changed that file. Never even touched it since saving the jwt secret.
@Projectnull4
2 жыл бұрын
Came across this issue myself and found it to be the result of caching and the package-lock.json file. The solution in my case: 1) Stop the react app 2) Verify that { "proxy": "localhost:5000" } is in your frontend package.json, not your root package.json 3) Delete the package-lock.json in your frontend directory 4) Run 'npm install' in your frontend directory to recreate the package-lock.json 5) Start your react app again and it should be working. I also deleted my node_modules folder in the frontend directory before running npm install again, but I don't think that was necessary.
@charlesloehle7998
2 жыл бұрын
@@Projectnull4 Just verifying that yes this solution worked for me. Maybe this will help otheres
@dominiknoga4806
Жыл бұрын
@@Projectnull4 Man... I've been trying to do this for whole day. Thank You so much
@gerryjtierney
2 жыл бұрын
Redux is literal hell
@mohammadjalifathi6193
11 ай бұрын
Toolkit makes it easy
@aidanbenbow6682
11 ай бұрын
I'm afraid there's a worse hell than that.
@ladywebber1726
2 жыл бұрын
One thing is for sure, you can guarantee a stellar tutorial from the Brad the legend. I did tons of courses online but I am a software engineer making over $100k thanks to the content on Traversy media and Brad's Udemy courses. I cannot thank this man enough, his approach is just different and learning is easy.
@DIVYANSHMISHRA08
2 жыл бұрын
if you are getting many errors like webpack, zlib etc. after login part, there must be somthing imported from express(idk how) in the authSlice or authService file, delete that and it'll work. Basically just find if there is something imported from express in frontend part and clear that.
@romulororizz
2 жыл бұрын
You’re a blessing man, I’ve said it before and I’m saying it again. Thank you!
@mariag.3844
Жыл бұрын
I had an issue where adding ToastContainer (51:18) caused me to have a blank screen. I was able to resolve this by using npm to use a different version of react-toastify
@regulardude3693
2 жыл бұрын
Had a problem with my logout action rejecting instead of being fulfilled... Ended up having to include it in the authService object(or function? I'm new to this xD) which I didnt see in the vid but it seems to have fixed it. Not sure if I did something wrong to have to do that but I just thought I'd mention in case others ran into the same problem. Loving the series!! Update: that was it. Saw it in the vid later on 😆
@dr00by
Жыл бұрын
Had the exact same problem! I didn't think Brad edited the video but he seemed to have it work without exporting the logout and was wondering if there was some trick.
@thomaswaldorf2829
Жыл бұрын
at 59:22 I had to reset the server and client to get a successful new user submission :) hope this helps someone.
@commentator2407
Жыл бұрын
Doesn't work still
@i_am_josh
2 жыл бұрын
Thanks Brad fir this last part of the MERN STACK series
@haroldramos1567
Жыл бұрын
The mastery of JS that Brad has achieved is impressive kudos to you Brad 🎉
@theodorn
2 жыл бұрын
Thank you for an awesome tutorial, helps me a lot in a project I'm working on.
@oumarsekisinde797
2 жыл бұрын
Thank you so much for these wonderful and educatif videos, we are really grateful
@alucard8678
Жыл бұрын
you can use SFC instead of RFCE now, it will leave the import react line and will straight up create a component
BRAD - THANK YOU...... I was stuck on receiving the actual error message until I watched your tutorial. Thank you.
@johnarnoldcatedrilla4378
2 жыл бұрын
I have a problem with log and and register. In redux It shows the fulfilled and payload but not firing the navigate i need to reload the page first before to work the navigate
@mikoajmarciniak6843
2 жыл бұрын
Bad auth example, its not good to put the whole user object in localstorage, because an advanced user will be able to edit it. best to have an "init"function that runs once when the page is loaded and send the token, and get a user as a response.
@davebudah
2 жыл бұрын
Thanks Brad. Grateful for this series.
@AnthonyMute
2 жыл бұрын
Having come from the usual redux prior to redux toolkit, this feels like the way you do git commit and it shows 99% change on the previous file. It's like to have to restart relearning. No types, actions or creating reducer files. They just like overhauled the whole thing 🤣
@shikhakumari6782
2 жыл бұрын
Oh my god I was just lookin for a good tutorial over this topic and I found yours what else is needed
@shivani9840
2 жыл бұрын
Hey Shikha! Are you a fresher and open to opportunities in web development currently? Have you created any projects in JavaScript frameworks?
@javascriptes
2 жыл бұрын
Another classic from my fav teacher!
@josemanueljante3975
2 жыл бұрын
we can use shortcut rafce ti create react arrow function export component. to remove the "import React from 'react'" simply go to extension settings > uncheck the box under Import React On Top
@Muhammadijaz-pt4td
2 жыл бұрын
such a helpful and informative.... many things clear with this playlist
@novailoveyou
2 жыл бұрын
Thank you Brad, you're awesome as always!
@anoun5323
2 жыл бұрын
Hi brad, Is it safe to store accessToken to localStorage? Doesn't it expose to XSS or CSRF?
@ramonasnider5535
Жыл бұрын
Thanks so much for that Video. Can't wait to get to the next one
@SuperSanjay99
3 ай бұрын
Really, its a great video to learn lot of things. Sir a request to you kindly add register user image upload as well....🙏🙏
@TimeoutMegagameplays
2 жыл бұрын
You should consider talking more about server-side validation and security with libs like express elm
@TimeoutMegagameplays
2 жыл бұрын
Btw thanks for your vids, they really make my day! :)
@dmitryutkin9864
2 жыл бұрын
Wonderful explanation! Thank you very much!
@jawaderfani8743
2 жыл бұрын
thank you brad
@jccorman5848
2 жыл бұрын
Server Error 404: I am not sure why, but I need to make sure to install CORS on the server, in order for my browser to connect. Otherwise I cannot connect to server and I get an error. I'm a complete newbie to Redux, so this part is particularly challenging to understand, even if it works. So the Redux course is next.
@evanbero9705
2 жыл бұрын
Another yet awesome tutorial, Brad. When documentation fails, Brad Traversy to the rescue. The Redux Toolkit docs are not great imo, and I agree, the counter example is not the best. I have not been able to find any docs on implementing http requests into RT. Really enjoy your Udemy courses. I've taken 3 of them. Thanks again!!!
@mdbaniani
Жыл бұрын
at 37:20 I don't see the initial redux states. I just see (pin) : undefined
@mdbaniani
Жыл бұрын
i guess i should have clicked on the redux dev tools extention button and looked at the opening window
@RenoNowhere
10 ай бұрын
did you end up finding a fix for this? @@mdbaniani
@abhyaskanaujia3862
Жыл бұрын
🥺Thank you Bard. May God bless you.
@ForzaPilot
2 жыл бұрын
Brad, you are a fucking rock star!!! Thanks for taking the time to do these tutorials.
@mediocreTyler
2 жыл бұрын
Best series of tutorials I have followed since starting web development. Thank you Brad, you are an amazing teacher
@ravenMK_
2 жыл бұрын
Thank you Traversy. God bless you.
@unnamedcodes
8 ай бұрын
At 37:00, you imported an undefined variable name authReducer and added it into the store reducer method.
@Pots-nz8wb
5 ай бұрын
You find something about it? I'm stuck with it
@Pots-nz8wb
5 ай бұрын
const user = JSON.parse(localStorage.getItem('user')) I forgot to put ' ' around the user, so it didnt work..Now working
@beckaldan
2 жыл бұрын
Thank you, I've learned a lot. Good stuff, keep up the hard work. I was searching for something like becoming a creator versus consumer of the react components. How about next video about Creating Modular React Component Library where we can publish into npm and consume in a another applications.
@farnoodlotfali4912
2 жыл бұрын
you are a hero!!!!
@mohsenkhademhoseini5843
2 жыл бұрын
it was really helpful thank you so much!!
@johnpaul4301
Жыл бұрын
How does anyone remember all these things and syntax?
@prestoncammarata5780
2 жыл бұрын
Great video. Just curious, why use redux if context api is available now ? or is it just good to know redux in general
@Alique_VSI
2 жыл бұрын
Please consider error handling in the frontend like when the password is wrong or if the user doesn't exist Thank you Great Job
@aritro-globe
2 жыл бұрын
Thanks for this tutorial
@dimitmoto1716
2 жыл бұрын
Do I need to know redux in order to follow along this video or he is teaching everything we need from redux?
@sarrimehdi2322
2 жыл бұрын
Thnxxxx ..was waiting for it
@roykim9033
2 жыл бұрын
This is really good tutorial. thanks you!
@GabrielAlexandruBolea
2 жыл бұрын
Pretty nice video Brad, I love your video, could you do something like that but in a simple way, not using redux? And maybe with TypeScript xD thanks
@BMikel
2 жыл бұрын
Awesome tutorial. thank you.
@mohamadnadimi5429
Жыл бұрын
how can we handle this without redux ? I want to use context
@jayeshjanyani
2 жыл бұрын
Brad, Thank for creating this series. Can you please help me with Why do we need navigate, dispatch in useEffect change variables???
@shivani9840
2 жыл бұрын
Hey Jayesh! Have you ever taken the help of any tutorial to do a project? Would you be interested exploring opportunities in web development?
@chrisstucker1813
Жыл бұрын
Any variable you use inside the useEffect function needs to be added to the change variables. Hope that makes sense
@zaritzki
2 жыл бұрын
did you guys saw this? (node:56611) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. [1] (Use `node --trace-deprecation ...` to show where the warning was created) [1] (node:56611) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
@BoolFalse
Жыл бұрын
Have you fixed this man ?? I just getting the same (
@coder2917
2 жыл бұрын
If anyone faced the error of "secretOrPrivateKey must have a value". Basically, it's shown up to you cuz the server command that got fired once running the dev command is inside the root folder, and remember it's "server": "nodemon backend/server.js". So, the dev or the server command could not find the environment variables that were created and saved in the backend folder, the reason why you faced this error. The solution is, you just have to edit the server commands to be "start: "cd backend && node backend/server.js", "server": "cd backend && nodemon backend/server.js".
@harunaisiyaku7153
Жыл бұрын
Please help, I'm stuck at 58:40 where the Register page was tested. My own just goes blank white. I have checked and re-watched several times. Any one with an idea what is wrong?
@GOPUBLICIDADEstudioCreativo
2 жыл бұрын
Pure Gold... thanks!
@ignaciogarcia-zm1nj
2 жыл бұрын
I freaking love you man!
@raphtis
2 жыл бұрын
Stuck at 59:00 with a 431 error (Request Header Fields Too Large), been at it for about an hour of googling and still can't figure this one out. Anyone know how to resolve this? Already tried clearing cache/cookies multiple times.
@nikhildixit2520
8 ай бұрын
did you solved it? if yes how
@nateo7045
2 жыл бұрын
I've never actually used Redux Toolkit, and in a way I enjoy torturing myself with regular Redux boilerplate, but this is pretty cool stuff. The whole thing about using Immer to allow direct changes to reducers is definitely nifty. Love the promise lifecycle actions as well.
Пікірлер: 462