How to add Redux to ANY Next.js app in 15 minutes (For Beginners)

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero”: www.papareact.com/course
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
00:19 SkillShare Sponsorship
02:05 Initialising the Next.js App with Typescript
02:54 Adding Redux & Setting up the Store
04:13 Wrapping App in a Redux Provider
05:38 Creating our First Redux Slice
08:48 Importing Counter Slice to the Store
09:29 Starting the App & Debugging with Redux Devtools
10:24 Adding our first Selector with the useSelector Hook
11:50 Adding Buttons to Dispatch Actions with the useDispatch Hook
12:36 Testing our App built with Redux!
13:32 Bonus Tip: How to correctly write a Selector
14:38 Outro
Let’s get it PAPAFAM 🔥.
#reactjs #nextjs #redux

[@SonnySangha]

📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

[@stevenwoolston8620]

Excellent description of Redux. I’ve been confused by all of the ‘jargon’ that surrounds Redux but you explained it in simple terms. Well done

[@jonjojr]

I prefer the long form clone series, but little focus videos like this are very useful to supplement the long form. Great video man, thanks.

[@swayze_0]

Briefly, clearly, qualitatively. Keep it up!

[@cyberstair]

he makes this so easy !! keep going man

[@generallifing]

Amazing!! Clean and Clear!!! I was a redux hater. Since the redux toolkit release, I will use redux as my state management tool again, thx Sonny!

[@chriscrowd4946]

Short and sweet! Thanks!

[@govindbchandran8681]

Nice one sonny, much needed

[@apacolypse2]

I been doing it this way for awhile, it's easier than the old way I was doing it.

[@Brenosalv]

I just can't believe the quality of your content. Amazing!

[@SonnySangha]

Glad you enjoy it! Thanks dude!!

[@tarisadindadeliyanti8401]

omg, I'm grateful to be able to meet this channel soon. U explained so well. Thanks ^^

[@SonnySangha]

You're welcome 😊

[@ahmadshbeeb]

thanks bro, this is exactly what i was looking for.

[@Divyam2600]

Please Sir bring your 5 day event soon!! Truly missing them very much.. Those were golden times.. Although I could never submit the code as I couldn't follow up but now I have evolved and will surely prove to be among the ones who get featured 💥💥 #PapaFam #PapaReact #SonnySangha

[@PattyBeautCode]

Awesome ! quick lesson but very straight to the point !! Now I get to know Mr. Redux even better. Thanks Sonny !

[@zacpour4997]

Redux store gets wiped out with NextJS SSR from one page to another. You can't simply use React Redux in a one page app and assume it'll work for most NextJS projects. You can't simply use your react tools with NextJS!✋

[@DoGzTheFiGhTeR]

Great work bro, Thanks 👍

[@aniketbhalla1521]

Awesome .....I was just about to do that in my project. I hope we don't need next-redux-wrapper.

[@carlopelosi5251]

Hey Sonny! Can you help us understand, how does nextJS plays with Redux when using server side props and static side props, Example, if we have a redux action that hits an API should we do this in server side props? Or is this something we don't have to worry about

[@kiragaming4499]

very useful thanks a lot

[@krutomjer]

Nice, quick way to learn stuff

[@programmingwithnit5308]

Thank you so much.

[@ghofranedarragi5601]

thanks for this explanation

[@el-vijay8903]

Best tutorial ever.

[@mahdiabolghasemi189]

thank u for best teaching

[@MrAps98]

Love you, Mr. Sangha.

[@wilsonibekason]

Thank you @sonny sangha, your content is very useful

[@h_maina]

hi Sonny, which screen recording software do you use?

[@talsadan8485]

Sonny you the best!

[@elkhanhamet2561]

Thank you!!!

[@Euquila]

So we are 1) server-side rendering our apps, 2) serving them to the clients, 3) the clients run some JS and setup a state manager that runs on the client, 4) User navigates to another route, which causes our store to be reset no? I'm having a really hard time understanding this architecture

[@sourenasahraian2055]

Could you plz at least once post a video on how a NEXT app can be deployed to AWS ? How do the SSG and SSR work there does it mean SSR is gonna work in A lamda ?

[@xxXAsuraXxx]

Nice. Could you show us redux in SSR with next js ?

[@federicoaguilera9573]

Plis

[@amirbasiri6555]

you're awesome, could you have a video with redux and server side rendering in next js. It is a bit confusing.

[@amirbasiri6555]

@♜whatsapp±1580𝟾𝟻𝟹𝟹𝟹56 Sonny thank you so much 🌹🌹🌹👍👍

[@jaular14]

Thanks for the video. Could you make a video about Zustand or tRPC? Please 🙏

[@mdsayem8893]

You are the best❤️

[@chiragramachandra]

I remember how I struggled to do it the first time despite having NextJS official documentation! Phew

[@cyberstair]

so much love to you

[@x-city5801]

Amazing video

[@gajen4evr]

Great..! 👏👏👏

[@ulugbekasadov5751]

Hey Sonny can you do video about how to use redux without redux/toolkit, Thanks

[@constantinemihailov4218]

❤ thank you.

[@jayantjagtap2976]

How to we use connect method to the components. Because using use selector for multiple values can be tedious. Help me out.

[@UpdaterMC]

can you update this tutorial with the latest next js version please

[@Angelmc_pixelduck]

ty

[@mihailodrinic4003]

Very good video

[@kulvirsingh4568]

Waheguru ji ka khalsa waheguru ji ki Fateh Awesome Sonny 🔥🔥

[@brayandvelasquez2256]

It would be great if you make a video explaining how to use redux and getServerSideProps!!

[@georgeraytchinov7794]

Sunny, can you add microsoft authentication to your next app build, would really appreciate it. Thanks!

[@fahimhassan4387]

Please make a video on redux rtk query with next js

[@jonasmeteling]

Dont you need the nextjs-wrapper to make it work in a nextjs app?

[@martapfahl940]

CMND + J, thanks buddy :D

[@merajansari0773]

please make more videos sir

[@x-city5801]

What’s the difference between redux and redux toolkit

[@carefree_ladka]

It'd be good if you showed us how to use SSR with nextjs and Redux Toolkit

[@saikrishnamuntha62]

bro have you find any tutorial on this SSR with RTK.I f u know please share

[@jeheskielsunloy3881]

@@saikrishnamuntha62 you can use next-redux-wrapper for SSR with redux

[@saikrishnamuntha62]

@@jeheskielsunloy3881 with out using next-redux wrapper can we use????? and we r dispatch in handlesubmit and also to keep dispatch in getserversideprops() is this way correct????????????? or any idea from ur side any link or video can u share?

[@vinodhm8452]

​@@jeheskielsunloy3881 how to wrap the layout.jsx when using reducer wrapper I tried but not working can u share the code I'm using Next 13

[@eguoli]

不错大哥。

[@dilkashshaikhmahajan1185]

Hi Brother please make one video on how to make a api call in redux toolkit in Nextjs

[@ElbinBinil]

Make a redux crash course

[@usamasaud9226]

Can you please make any basic app using React Native using Redux and Typescript ( with npm packages ) PLEASE? Your half hour tutorial would be very helpful.

[@SonnySangha]

Great suggestion!

[@NeerajSingh-ch7wl]

@@SonnySangha Sir, if possible please use client side field level encryption in MongoDB to secure the database just like to provide Pay slip of employee and also secure the bank details data using client side field level encryption. I don't found any video on youtube or anywhere using client side field level encryption in MongoDB

[@NeerajSingh-ch7wl]

@@user-sq7de3dd2j Sir, if possible please use client side field level encryption in MongoDB to secure the database just like to provide Pay slip of employee and also secure the bank details data using client side field level encryption. I don't found any video on youtube or anywhere using client side field level encryption in MongoDB

[@trixwebtech307]

NICE

[@dannyisrael]

Does anyone know what he's using for the code autocomplete? Is it Co-Pilot?

[@stephonking2847]

I'd love to get your course but does it hae to be so expensive.... sigh

[@dream__moments]

when page is serverSide rendered can we use this to update redux store ??

[@abbaskareem5281]

I don't think so, because the store is on the browser .. I hope someone give us correct answer.

[@doz7979]

No, as long as your next.js app is not a single-page application, all redux states gone once the new page is loaded

[@dream__moments]

@@doz7979 thats why still we require next redux wrapper

[@abdullahelwalid4494]

Can you make another video using redux with next 13

[@amiramaouch2774]

with nextjs 13 we can't simply wrap the react-redux Provider around the app

[@anesunyamasoka8791]

was literally stuck on this

[@villagelifewithmerinkitche9136]

Good

[@djordjen9424]

How about Recoil?

[@ogarjosephodama1878]

Hello Sonny, can you do cash app build or clone?

[@ogarjosephodama1878]

Scammer!

[@simple_islam_]

Can you make a video on passing data from child to parent component please......

[@SonnySangha]

You ideally don’t want to do this, hence why you introduce state management tools such as redux or recoil

[@simple_islam_]

@@SonnySangha but few companies are still using props to pass data😬

[@saikrishnamuntha62]

bro here there is nothing to add next-redux wrapper and do a project on the apis calling in reduxtoolkit and do authentication in nextjs

[@ComputationalArt]

ContextAPI is It better than Redux? Why we have to use Redux? ContextAPI is easy respect redux

[@davenpaint]

Actually, Redux doesn't work with next.js 13 with Typescript embed in a Server component.

[@DoGzTheFiGhTeR]

Follow the tutorial to the T, its 100% working using latest next version 13.0.4 "dependencies": { "@reduxjs/toolkit": "^1.9.0", "next": "latest", "react": "18.2.0", "react-dom": "18.2.0", "react-redux": "^8.0.5" }, "devDependencies": { "@types/node": "18.11.3", "@types/react": "18.0.21", "@types/react-dom": "18.0.6", "autoprefixer": "^10.4.12", "postcss": "^8.4.18", "tailwindcss": "^3.2.1", "typescript": "4.8.4" }

[@davenpaint]

@@DoGzTheFiGhTeR Redux run correctly in a page component, not in a server component. A huge issue ticket was opened on github.

[@flemingstarsyiemlieh2125]

Does anyone here know how to use redux persist with nextjs... Thanks in advance

[@riponindo9823]

Hi

[@jamezfatout]

Does anyone here know how to use redux persist with nextjs...

[@grx4.067]

Bro will you consider making a separate hindi channel

[@gigakvachakhia4777]

how about ssr or data fetching (( ?

[@user-fx5ke9ip2z]

M͛o͛r͛e͛ UPDATE o͛n͛ N͛F͛T͛s͛,BTC W͛h͛a͛t͛s͛a͛p͛p✙𝟏𝟑𝟎𝟐𝟑𝟒𝟓𝟏𝟏𝟐𝟔 M͛o͛r͛e͛ UPDATE o͛n͛ XRP ,N͛F͛T͛s͛,BTC 📊 👆👆

[@user-fx5ke9ip2z]

🌁📩📩ꜱᴇɴᴅ ᴍᴇ ᴀ ᴅɪʀᴇᴄᴛ ᴍᴇꜱꜱᴀɢᴇ ʀɪɢʜᴛ ᴀᴡᴀʏ

[@deltamakuba]

#PAPAFAM

[@0scarDev]

pass the code

[@AhmadRaza-mw7ux]

❤️❤️❤️❤️❤️❤️❤️

[@induchandana4379]

superrrrr

[@jo3436]

did anyone notice at 14:24 how the autocomplete describe the function very accurately!

[@MilindaAbeykoon]

yes. it's github copilot

[@ikarosouza]

Short answer: Don't. You won't have a project complex enough so that using redux might actually help.

[@SonnySangha]

Bad advice. Completely disagree

[@ikarosouza]

@@SonnySangha ok, would you please explain how "keep it simple" is a bad advice?

[@abidshahriar]

this redux setup will not work when you add other pages in nextJS

[@akirayano3677]

Why?

[@SonnySangha]

Yes it will, I’ve done it many times

[@Birendrakumar-en9yi]

Thanks, uderstood