Redux and NextJS 13 Tutorial | Redux Toolkit Tutorial With Next 13
HTML-код
- Опубликовано: 2 июн 2024
- The first 1,000 people to use the link will get a 1 month free trial of Skillshare skl.sh/pedrotech06231
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 amzn.to/42kqFuM 💻 Monitor
🖱️amzn.to/3C0ZhHb 🖱️ Mouse
📷 amzn.to/3OHJvbM 📷 My Camera
🎤 amzn.to/3oxSthj 🎤 My Microphone
⌨️ amzn.to/3oFPpj1 ⌨️ My Microphone
⚡ amzn.to/3MYMnzM ⚡ LED Lights In the Background
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
NEXT13 REDUX TIMESTAMPS
00:00 | Intro
02:00 | Project Setup
04:09 | Installing Redux
04:19 | What is Redux Toolkit?
05:57 | Creating a Redux Store
07:32 | Creating Reducers
07:42 | Creating the Auth Slice
18:20 | Creating the Provider
24:42 | Using Selectors
#nextjs #redux 
Наука
The first 1,000 people to use the link will get a 1 month free trial of Skillshare skl.sh/pedrotech06231
Thanks Pedro
I am experiencing an issue where I am unable to make progress due to an error. Here is the error message:
"Unhandled Runtime Error
Error: Could not find the react-redux context value. Please make sure that the component is wrapped in a ."
Your theme
I am so grateful for your work Pedro. Your videos have been so helpful, and you are the only one I have found that is making useful tutorials for Next.js 13 app router. Around the time I ask myself a question, you made a video. Thank you so much!!!
I spent the entire day working with Redux in my company's React project. I was feeling a bit confused about how to set it up in my current Next.js 13 project, but then I stumbled upon this helpful video. It was a pleasant surprise! 😊
Glad I could help!
@@PedroTechnologies is it possible for you to provide the link to the Github repo, as I like to look over the code in a bit more detail. You say in your video you link to it, but I don't think it's there, only the one from your NextDeploy video. Thanks!
Hi sahid I want your help in nextjs so will you help me ?
what company do you work in?
I read bunch of articles and watched a lot of videos this is the simplest and most structured video to use redux wit nextjs I really recomment it Thank you !!
Great video bro, thanks for keeping it simple and not over complicating
Great tutorial. Having said that, it makes me love Zustand even more. So much boilerplate for something that should be so simple.
Pedro, mucho respect from Greece! you are my favourite tech youtuber
Thank you. I could not find how to use the Provider correctly in the new version and your video helped me
great video man,you teach so well
I took a challenge that I will be creating e-commerce website from scratch with out knowing much about website development. I saw this video and was able to build a mockup in a day. Thanks bro
I really learned a lot , I would love it if you make a part 2 where you explain some advance redux concept...
I'm a full stack web developer, I learned redux from documentation itself It might be confused when you learn it from there. But this video save you a lot of time, and explains redux pretty simple and cool, good job!!
A massive thanks to you Pedro!.I always thinking the day I finish all of your react and mern tutorials I think i would become a better developer.Can't wait to finished learning all of your tutorials.I know most of the people can learn directly by reading some docs.But i'm not that kind of person.English is not my first language tho.But i saw your channel last 6 months ago.I finished your React series.And i can feel that your ways of teaching made my thinking of programming logic easier.I'm currently at my 3rd yr CS Uni.I want to say so so so thanks to you Pedro.Have a good day 🎉❤
Happy to hear that you enjoy the content :)
I was looking for this just yesterday. I also watched your last redux tuts. Good job!
Glad I could help!
Respect. Easy and clear.
Thank you very much! Explained so well.
Came here cause I was getting errors trying to implement the Provider on NextJs. Thanks man.
perfect timing bro thank you
activated the notification belt, you saved me hour of debugging !
Nice. Question is how do you use redux in a server component?
one of the best video of redux, so easy tech
fantastic video my guy
I am going to start learning react js from your playlist.
I hope that would immensely help me
I was trying to find out the bug in my redux setup for hours, it was working in the base path "/" but not on "/login" and then I found your video. The issue was I forgot to put "use client" in the login page.
Thank you
Thank you for your hard work! All your videos are very useful for us self-taught developers :)
Thankyou, this video is amazing
Thank you.very clear!!! But what if you refresh the page? The state is lost. How would you persist it?
great tutorial!
thanks bro you saved my day
bro , does it work ?
Thank you so much. I've spent days scouring the internet looking for a comprehensive guide and here it is. I have a question though, in trying to fetch data from an API, how would I go about that?
I have the exact same question. What did you end up doing?
Thanks so much bro. Your explanations always perfect. Typescript type for store that we exported is like a magic number for us.. how did you know this action was required?
Thank you so much! Please consider making a video with Zustand :)
Thanks a lot man :D
Wow bro I saw this first today and this is what I have been searching for😮
Glad I could help!
thank you was really helpful. Is it common to use next13 with mobX instead of redux, i am asking because i didnt find any tutorial about combining next 13 with mobX
Shouldnt we mutate values within reducers? As its using immer?
Thank's fo the video.
this video is very helfull👍👍🔥🔥
I am experiencing an issue where I am unable to make progress due to an error. Here is the error message:
"Unhandled Runtime Error
Error: Could not find the react-redux context value. Please make sure that the component is wrapped in a ."
If we had a password field too. How can we handle multiple values coming from the components? I mean we would have pass those in the login function?
Thanks man
Hey Pedro, nice video and that helped me a lot to use redux with my new next project. One simple dubt of me that if I use the use client in top of the provider component and it wrap everything in layout.tsx file, will the whole app be rendered in the client? as all of the children of client components render in the client. I may be wrong, can you kindly fix my dubt?
I have the same dubt, is this the correct way to do it?
Thank you ❤
New to all this. But why nest your states under a 'value' property?
I left with so many questions about how to divide the actions and reducers to different files like I do in regular redux - I mean why did you write it all in one file? its not scalable
Can you comment on this please?
in this case your web-site will not be indexed by search robots, right? I don't understand as well how indexing works
What is the point of using app router if we are loosing the features of server side rendered pages if we make it use client?
Which Icon extension are you using?
can you make a video on how to use the rtk query in ssr?
thank you guy
Thanks!
Hi Pedro! I found this video so interesting and after I tested it on local project, I've noticed that on "npm run build" the operation fail cause to "Cannot destructure property 'store' of 'useReduxContext(...)' as it is null."
I've already searched this error but with no response and now I don't know how to continue it.
Have you any suggest? What kind of Next version do you use? Thanks 💙
ya when you try to call useAppSelector in layout.tsx ,this problem will arise because we are trying to call before wrapping. But iam wondering to manage that data in layout, i need that value inside layout. Iam stuck
@@nilin6769Hey man, did you fix it?
@@samuelvalentine7846 we can use that in layout.tsx because it is like index.js in react. Change your folder structure instead
If we can use redux only with the client side , how can we use it to handle backend tasks and set that data to store?
Would Redux in Nextjs not be overkill? Since libraries like Zustand and Jotai make state management so easy, unless maybe if your interviewing for companies with this stack it is good to know?
Yeah I prefer Zustand so easy to use
great work man
could you please add the redux persist using this same project ?
Thank you
If you have to declare pages to "use client" is there any point of using next.js?
But we can only use client components in this video.
DO u have a github link to this project? I searched in your repos and couldn't find it
What will happen if you move to another page? the state in the store will be lost. How to handle that?
Thank you!!!!
I really lost whole of my day just for looking tutorials about nextjs 13 redux
thank you
This all happens on the client side, do you know any possible way to implement it using the serverside components?
redux is built only to deal with client component
in my case, dispatching from /login but on /dashboard state is not coming
can i upload to store by ssr not client side and use on client side?
I am facing an issue when I try to build the application using redux. Like I have this structure:
| app
page (render the components header and foodcard)
layout
| components
| header (use redux data)
| foodcard (use redux data)
and the build return this error:
[ ] - info Generating static pages (0/3)ReferenceError: Cannot access 'cart' before initialization
But when I move the code from each component inside the page, it works the build :s
Can someone help me out?
But How do I solve the caching ? How would I store my state in client side since this code is rendered in server side ? I know we could use localstorage on the app directory , but how to use it on redux store itself ?
good question, did you find any possible solutions?
hey pedro my UI components in the Layout page have gotten all messed up when i wrapped the reduxProvider ,how do i fix it edit: i had to rebuild my react project to fix it ...not a tutorial problem 👍😹
Bruh we really need a graphQl with Next 13 tutorial, too
You're awersome!!!!
nice video dude! your linkedin profile url is broken actually, can u put here or update? I'm from brazil too (vamo dominar a gringa 👊)
What is your theme Vscode?
Thanks for the video.
Can anyone please explain. Can I use Redux Store globally (it works only in client components) and use Server Components at the same time (because fetching data etc is only available in server components e.g. supabase). And it looks if I wrapped layout with provider - all nested components can't be server components (only client components)... so means no server components at all... or am I wrong?
if I wrapped layout with provider - all nested components can't be server components - its not true, u can read nextjs docs for this thing
Helo pedro, i am trying to set middleware using redux based on local storage or state from reducer but i don't find to handle this... Can you help me or anyone can help me?
how we can update value from rsc component why its not working
Can u make a room tour video ?❤❤❤
This video would have helped me 2 weeks ago 😅😅
Could you make video about full structure for real work project such as make project with Nextjs + redux + mongo + tailwind + prisma + auth token ? Thank you
Great tutorial, thanks! One Qs, If we wrap the layout children with a Redux Store provider which is a client side component ( using "use client" ) then will it make all of its children CLIENT SIDE ? will all of my components will be rendered ONLY on CLIENT SIDE? Can someone please confirm this, I'm confused in this concept. Thanks!
yes
NO!!
@@praiseoshilim1006 No man, if there is {children} in 'use client' file, children can be rendered on server as well
can anyone tell me which theme he is using for vs code?
great tutorial, but you can just separate typescript tutorial and the redux. confusing newbie like me😅
How to use RTK Query and data caching with new 13 🙂
bro where is the GITHUB repo?
But this way we disable SSR and basically all lose all benefits of next, dont we?
Provider' refers to a value, but is being used as a type here. Did you mean 'typeof Provider'?
any one came across this?
It is very similar to the implementation in react ( javascript )
nice Video . What about Zustand (i think its better than redux )
I was expecting this tutorial to use next-redux-wrapper so I was very dissapointed to find out you just ended up with "use client", why bother with nextJS then ?
I didn't start next js yet but i came to give our channel the like and comment that it deserves ❤
Thank you
thunks topic missing
These updates be like, NextJS and React are basically turning into PHP so every react developer be like, HAS TO COPE.
I don't think actually we need stat management in next js
where is source code?
Redux seems too much unnecessary steps. I moved to recoil. 😅
using 'use client ' destroy your whole purpose of using next js which is ssr
Then how will you be using react hooks without "use client" ?
Just some important info for you. I thumbed down all the videos as you can't watch them at all for any peiod of time for learning as you advert placement is all the time. Not worth wasting a subscription on your channel.
too much bla-bla
I have an error in my provider.ts file, even if I follow exactly your code
return {children};
: "'Provider' refers to a value, but is being used as a type here. Did you mean 'typeof Provider'?" And the import from react-redux does not seem to work even if I uninstall it and then reinstall it.
same here, were you able to fix it
@@niko4617 yeah. Rename your file with .tsx.
.TS file cannot render component
@@Presidentum thank you!!! I later figured it out, such a silly mistake😂
why not use wrapper? wrapper.withRedux()