Next.js 13 Redux Toolkit Tutorial

Learn how to use Redux Toolkit in the Next JS 13 app directory.

Other Videos:

#nextjs #redux #reduxtoolkit #reactjs

[GabrielGasp]

For those left with the question: "Isn't this messing up the whole SSR thing" or "Now that there is a client component wrapping the entire application, isn't it forcing all components to act as client components", read along.

This is not actually the case, server components are only handled as client components when they are directly imported and rendered in a client component (that has 'use client'). In this implementation they are not actually imported, but received as children. When you do this, the `{ children }` acts as a "hole", it's not rendered there but in the parent component and then passed (as children) to "fill the hole".

This is a bit confusing but is in the docs, look for "Nesting Server Components inside Client Components" in the "React Essentials" section.

You can confirm this pretty easily, follow the video and wrap the layout children in the Redux provider. Now, leave the page.tsx file as a server component (no 'use client') and add a console.log to it. Notice that the log only happens in the server, not in the browser console, this is because the component is still handled by the framework as a server component. Or you can just install and add the "server only" directive at the top of page.tsx and confirm that you are not getting any errors ¯\_(ツ)_/¯.

Also, you don't have to add "use client" in every redux file, only in the provider.

Fun fact: Next.js is already using redux under the hood, if you have the Redux DevTools extension installed you can find a next-router store.

[jaimepuentecontreras]

I love your english, I am a spanish speaker and I can understand any single word you say, that's wonderful. Nice tutorial

[sylvesterasiedu]

Thanks for explaining this clearly. Most other Youtubers tend to assume this knowledge is common so move along without such detail as you have provided. Thanks

[iangreene]

this is the only resource i have found on the subject that explains it well enough to implement my own logic.

[Aditya_sharma]

I was upset for 24 hours. Everything felt easy after watching one of your videos...thankuu so much.. 🇮🇳

[umeshkumarbedi]

Thanks a lot. It's really helpful. You completed the major thing only in 13 minutes. Good knowledge.

[Theokondak]

Imo, worst thing with Next13 is that it's a framework that tries to lock you in the Vercel ecosystem.

[maruf-procode]

It works but if I refresh page it shows following error, Unhandled Runtime Error
Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

[paydrostylin]

Very very informative and much needed. I am studying Next13 right now to master it and your info is helping my comprehension on these features and how to use them properly. 🙌 Thought I would pay you back with some engagement and like/ share 😅💯

[tech]

Does wrapping the children with the <Providers/> component make every single child component a client side component?
If that's the case, doesn't it destroy the whole point of the app directory?

[bislan-aranyan]

oh my, thank you so much. I searched this ptoblem 4 hours

[CodeElectrofying]

Really Bro thanks a lot for explaining this so clearly. This helped me to build the app which i was not able to because of this redux error thanks a lot bro for this help keep making this sort of videos with simplicity and clarity

[adamtrieseverything]

I can't thank you enough for this - it helped me so much

[shamstabraizbaig]

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

[satvikkushwaha]

thanks man, great tutorial, quite helpful

[gemanepa]

What if I want to store data coming from the server in the initial state of the redux store?

[moeinpourhamzeh]

This tutorial was awesome. Can you make another video on how to call backend from slices?

[pradhyumnsharma]

Thanks a lot. Stucked at error, solved by your video

[redeagledave]

Thank you very much for this great tutorial, this helped me so much! 🥰

[zain.sadaqat]

Wrapping clinet-side in the layout.tsx file, isn't convert the whole app into client side?