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 ."
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! 😊
@@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!
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!!
06:49 Reducers 07:08 Reducers | Access to the state's values 08:53 12:19 Reducers 13:11 Reducers | logOut 16:18 How to use slice 16:49 How to use slice | Add slice to store 21:23 Consume provider 22:32 useDispatch 23:14 Login 24:48 useSelector 25:02 useSelector
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 !!
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 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!!!
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 🎉❤
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 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 ."
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
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?
Why do so many bloggers show how to setup next + RTK, but no one shows how to get next ssr to work with RTK ? If you wrap your the children in layout you don't get the markup, how do crawlers can read your website?If you wrap your children in a layout, you don't get the markup. How can crawlers read your website for seo? If you don't need such things then you should use simple react as more lightweight framework
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
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 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?
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 ?
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?
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
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?
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?
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?
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 ?
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!
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 👍😹
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
What is your advice? Im really asking for help, I'm back to doing development, was doing react since react 13, over 16 and 17. Was using Redux with whole boilerplate and all wrapper setup. What is your advice for today? I mean, I can pass with using Context, but what do you suggest?
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.
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 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'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!!
06:49 Reducers
07:08 Reducers | Access to the state's values
08:53
12:19 Reducers
13:11 Reducers | logOut
16:18 How to use slice
16:49 How to use slice | Add slice to store
21:23 Consume provider
22:32 useDispatch
23:14 Login
24:48 useSelector
25:02 useSelector
the content is clear and well explained. thank you
Pedro, mucho respect from Greece! you are my favourite tech youtuber
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 !!
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 was looking for this just yesterday. I also watched your last redux tuts. Good job!
Glad I could help!
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!!!
Came here cause I was getting errors trying to implement the Provider on NextJs. Thanks man.
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 :)
Thank you. I could not find how to use the Provider correctly in the new version and your video helped me
Great video bro, thanks for keeping it simple and not over complicating
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?
Shouldnt we mutate values within reducers? As its using immer?
great video man,you teach so well
Respect. Easy and clear.
Great tutorial. Having said that, it makes me love Zustand even more. So much boilerplate for something that should be so simple.
activated the notification belt, you saved me hour of debugging !
one of the best video of redux, so easy tech
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 ."
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
I really learned a lot , I would love it if you make a part 2 where you explain some advance redux concept...
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
But we can only use client components in this video.
great work man
in this case your web-site will not be indexed by search robots, right? I don't understand as well how indexing works
perfect timing bro thank you
thanks bro you saved my day
bro , does it work ?
can i upload to store by ssr not client side and use on client side?
Thank you very much! Explained so well.
If you have to declare pages to "use client" is there any point of using next.js?
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?
fantastic video my guy
Wow bro I saw this first today and this is what I have been searching for😮
Glad I could help!
Which Icon extension are you using?
Thank you.very clear!!! But what if you refresh the page? The state is lost. How would you persist it?
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
Why do so many bloggers show how to setup next + RTK, but no one shows how to get next ssr to work with RTK ? If you wrap your the children in layout you don't get the markup, how do crawlers can read your website?If you wrap your children in a layout, you don't get the markup. How can crawlers read your website for seo? If you don't need such things then you should use simple react as more lightweight framework
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?
Thank you so much! Please consider making a video with Zustand :)
Bro, Can i use redux in a server component in next js
New to all this. But why nest your states under a 'value' property?
DO u have a github link to this project? I searched in your repos and couldn't find it
great tutorial!
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
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?
I am going to start learning react js from your playlist.
I hope that would immensely help me
What is your theme Vscode?
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?
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 my case, dispatching from /login but on /dashboard state is not coming
Thankyou, this video is amazing
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?
What will happen if you move to another page? the state in the store will be lost. How to handle that?
could you please add the redux persist using this same project ?
Can u make a room tour video ?❤❤❤
how we can update value from rsc component why its not working
Thanks a lot man :D
Thank you for your hard work! All your videos are very useful for us self-taught developers :)
this video is very helfull👍👍🔥🔥
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
can anyone tell me which theme he is using for vs code?
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
bro where is the GITHUB repo?
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?
can you make a video on how to use the rtk query in ssr?
Thank's fo the video.
great tutorial, but you can just separate typescript tutorial and the redux. confusing newbie like me😅
Thank you!!!!
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?
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?
thank you guy
Thanks!
Thank you
I really lost whole of my day just for looking tutorials about nextjs 13 redux
thank you
But this way we disable SSR and basically all lose all benefits of next, dont we?
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 ?
How to use RTK Query and data caching with new 13 🙂
thunks topic missing
Bruh we really need a graphQl with Next 13 tutorial, too
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
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 👊)
You're awersome!!!!
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 👍😹
This video would have helped me 2 weeks ago 😅😅
It is very similar to the implementation in react ( javascript )
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
I don't think actually we need stat management in next js
nice Video . What about Zustand (i think its better than redux )
where is source code?
These updates be like, NextJS and React are basically turning into PHP so every react developer be like, HAS TO COPE.
I didn't start next js yet but i came to give our channel the like and comment that it deserves ❤
Thank you
Redux seems too much unnecessary steps. I moved to recoil. 😅
wish i was a footballer i wont be struggling to understand all this????
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" ?
This dude is talking about using Typescript, because you should, yet he is using Redux for auth. How bad can you be? So elementary.
What is your advice? Im really asking for help, I'm back to doing development, was doing react since react 13, over 16 and 17. Was using Redux with whole boilerplate and all wrapper setup. What is your advice for today? I mean, I can pass with using Context, but what do you suggest?
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