Redux and NextJS 13 Tutorial | Redux Toolkit Tutorial With Next 13

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: [e-mail]
🌟 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

[@PedroTechnologies]

The first 1,000 people to use the link will get a 1 month free trial of Skillshare skl.sh/pedrotech06231

[@Jeridi]

Thanks Pedro

[@shamstabraizbaig938]

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 ."

[@onlineincomeideas6996]

Your theme

[@patrickjreid]

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!!!

[@flaksparkle]

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 !!

[@shahidshafi1227]

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]

Glad I could help!

[@rhiannonmonks6894]

​@@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!

[@SURAJKUMAR-gn7ep]

Hi sahid I want your help in nextjs so will you help me ?

[@PmartN]

what company do you work in?

[@omgitsjesus007]

Great video bro, thanks for keeping it simple and not over complicating

[@danielcarlmanpessoal]

Great tutorial. Having said that, it makes me love Zustand even more. So much boilerplate for something that should be so simple.

[@user-ve8ux5yy7y]

Thank you. I could not find how to use the Provider correctly in the new version and your video helped me

[@k303k]

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 🎉❤

[@PedroTechnologies]

Happy to hear that you enjoy the content :)

[@getinstant6122]

I really learned a lot , I would love it if you make a part 2 where you explain some advance redux concept...

[@peirama2]

Pedro, mucho respect from Greece! you are my favourite tech youtuber

[@FootballFanzZonee]

I was looking for this just yesterday. I also watched your last redux tuts. Good job!

[@PedroTechnologies]

Glad I could help!

[@kabeerahmad26]

I am going to start learning react js from your playlist. I hope that would immensely help me

[@giwargis01]

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!!

[@beyza2536]

Thank you for your hard work! All your videos are very useful for us self-taught developers :)

[@hajimeippo804]

Thank you very much! Explained so well.

[@JoelOluwafisayo]

great video man,you teach so well

[@AlexSmith-ms9xb]

Thank you so much! Please consider making a video with Zustand :)

[@fosimuboolubo8891]

Came here cause I was getting errors trying to implement the Provider on NextJs. Thanks man.

[@yassinebouchoucha]

activated the notification belt, you saved me hour of debugging !

[@shivangrathore]

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

[@SohoCode]

Respect. Easy and clear.

[@SEMDOCTORS]

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

[@Adam-oq4xq]

perfect timing bro thank you

[@amineshon]

one of the best video of redux, so easy tech

[@sbmfootballarena829]

Wow bro I saw this first today and this is what I have been searching for😮

[@PedroTechnologies]

Glad I could help!

[@allankariuki9762]

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?

[@gonzalobruna7154]

I have the exact same question. What did you end up doing?

[@ZoranEm]

fantastic video my guy

[@agusdwimilniadi]

Thankyou, this video is amazing

[@xxXAsuraXxx]

Nice. Question is how do you use redux in a server component?

[@bastienv6233]

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?

[@andreifilip8427]

great tutorial!

[@Lofausto66]

Thanks a lot man :D

[@swire1571]

thanks bro you saved my day

[@brienaustinclayton]

bro , does it work ?

[@svay6849]

Thank's fo the video.

[@pinkrosemoli]

Thank you.very clear!!! But what if you refresh the page? The state is lost. How would you persist it?

[@gavit633]

this video is very helfull👍👍🔥🔥

[@milanthakur4975]

Thank you ❤

[@solosdev6946]

Thanks man

[@isipisiml4546]

can you make a video on how to use the rtk query in ssr?

[@giorgikiladze1151]

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

[@guidocaru]

Thanks!

[@user-vs2cr2gs2w]

thank you guy

[@christiannwodo2151]

Thank you

[@marianaangel5338]

Thank you!!!!

[@agee3698]

Shouldnt we mutate values within reducers? As its using immer?

[@najmulhc]

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?

[@emanuelmejia4525]

I have the same dubt, is this the correct way to do it?

[@tabaraksohail7764]

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?

[@Hereisvito]

Can u make a room tour video ?❤❤❤

[@Hhammer]

This video would have helped me 2 weeks ago 😅😅

[@emporteme]

I really lost whole of my day just for looking tutorials about nextjs 13 redux thank you

[@user-bi6rm2lf7o]

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?

[@Hereisvito]

Bruh we really need a graphQl with Next 13 tutorial, too

[@smreason]

New to all this. But why nest your states under a 'value' property?

[@caresbruh]

could you please add the redux persist using this same project ?

[@ashutoshdash1999]

Which Icon extension are you using?

[@ankitupadhyay918]

It is very similar to the implementation in react ( javascript )

[@shamstabraizbaig938]

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 ."

[@jaysiefamily]

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

[@user-kp2om1kn8x]

But we can only use client components in this video.

[@horix-sound]

in this case your web-site will not be indexed by search robots, right? I don't understand as well how indexing works

[@the-LordXNobx]

great tutorial, but you can just separate typescript tutorial and the redux. confusing newbie like me😅

[@arjunnayak9088]

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?

[@shivangbhardwaj1475]

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?

[@eshw23]

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?

[@parassharma7041]

Yeah I prefer Zustand so easy to use

[@shriprasanna3918]

nice Video . What about Zustand (i think its better than redux )

[@wilmacedo]

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 👊)

[@raimohaikari707]

If you have to declare pages to "use client" is there any point of using next.js?

[@bahaaaldeen9611]

great work man

[@marianaangel5338]

You're awersome!!!!

[@PedroTechnologies]

[@romanmed9035]

can i upload to store by ssr not client side and use on client side?

[@it_student855]

I didn't start next js yet but i came to give our channel the like and comment that it deserves ❤

[@PedroTechnologies]

Thank you

[@MauroMercuri]

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 💙

[@nilin6769]

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

[@samuelvalentine7846]

​@@nilin6769Hey man, did you fix it?

[@nilin6769]

@@samuelvalentine7846 we can use that in layout.tsx because it is like index.js in react. Change your folder structure instead

[@KMordhwaj]

in my case, dispatching from /login but on /dashboard state is not coming

[@vladislavkornushenko]

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?

[@nikonfilanovsky7914]

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

[@mdkawsarislamyeasin4040]

How to use RTK Query and data caching with new 13 🙂

[@mahdimotallebi7207]

What is your theme Vscode?

[@user121304]

DO u have a github link to this project? I searched in your repos and couldn't find it

[@codedtrader4887]

This all happens on the client side, do you know any possible way to implement it using the serverside components?

[@helmi2376]

redux is built only to deal with client component

[@stAr13510]

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 👍😹

[@yasserhy]

What will happen if you move to another page? the state in the store will be lost. How to handle that?

[@varunneo560]

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 ?

[@downfall6223]

good question, did you find any possible solutions?

[@tabaraksohail7764]

can anyone tell me which theme he is using for vs code?

[@shehwar-dev]

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!

[@logiccomputer8000]

yes

[@praiseoshilim1006]

NO!!

[@nenadrakovic]

@@praiseoshilim1006 No man, if there is {children} in 'use client' file, children can be rendered on server as well

[@user-xu1zy7pn2q]

how we can update value from rsc component why its not working

[@DavidLucas-ci2fy]

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?

[@ujangpudin2004]

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?

[@RohitKohli-rd7dh]

Provider' refers to a value, but is being used as a type here. Did you mean 'typeof Provider'? any one came across this?

[@luxury5]

bro where is the GITHUB repo?

[@DenisBilurka]

But this way we disable SSR and basically all lose all benefits of next, dont we?

[@user-wz6ov4uf5c]

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 ?

[@simonzed704]

thunks topic missing

[@jacquelynecarmen]

I don't think actually we need stat management in next js

[@ichiroutakashima4503]

These updates be like, NextJS and React are basically turning into PHP so every react developer be like, HAS TO COPE.

[@oook3407]

where is source code?

[@gaming_zen_99]

Redux seems too much unnecessary steps. I moved to recoil. 😅

[@logiccomputer8000]

using 'use client ' destroy your whole purpose of using next js which is ssr

[@kailashjs]

Then how will you be using react hooks without "use client" ?

[@parenteseswebdev]

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.

[@TarasovFrontDev]

too much bla-bla

[@Presidentum]

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.

[@niko4617]

same here, were you able to fix it

[@Presidentum]

@@niko4617 yeah. Rename your file with .tsx. .TS file cannot render component

[@niko4617]

@@Presidentum thank you!!! I later figured it out, such a silly mistake😂

[@user-xz5cm5ix1c]

why not use wrapper? wrapper.withRedux()