How To Use Redux With Next.js App Router

hello everyone welcome to the video and today I would like to talk about how to use Redux with new next.js version which comes with app router so let's just get into it here's the documentation and I'm just going to jump straight into it grab what I need go to my code editor here it is I'm gonna stop the development server and install the dependencies with pnpm so what you need is a Redux toolkit and bindings in form of react Redux all right so I'm just gonna go through the documentation it's not going to be something totally different with one small change all right what we need to do next is we need to configure the store so let's just grab this code and I'm gonna do it with like the a little bit different than their suggest in the docs I'm going to do the store directory and here have a file name store.ts paste and actually that's always what we need to do in this step and now comes the tricky part we need a Redux provider and it changes a little bit and I'm gonna show you why so if you would like to use it like in the old next JS or in the in the way of for example a VT up Veet you'll just basically put your providers here in the layout.tsx and now you can also do this and there is no real downside but if you would put it directly if you would put your provider directly in layout.tsx you would have to make entire layout client side and we don't really want to do that so I'm just just gonna grab Imports and create a separate file it's going to be called store provider we've got Imports and what else that I need all right all right let's fix this typescript hey great and I guess it's all I need I have to fix this only the import Okay so we've got that provider and here's the most important step you have to make it client component so you need to add directive use client without it it's gonna yell at you that you're trying to use client-side code on the server component so now you come here you are your style provider wrap your entire entire structure and let's just go back to the documentation and now it's time for some boilerplate oh yeah we love it so that there's clear slice.ts I'm just gonna put all this code here I'm not gonna worry about you know comments anything I just want to show you right now that it will be working okay we've got that we also need to add to our reducer so let's just go to our star.ts no all right so now we should be able to use Hooks and generally a Redux store inside our components so let's just go and try to do it so let's just go to the page the TSX it's our it's our main page I will delete this boilerplate from the next Js what else do I need to delete this okay actually I'm just gonna paste what they suggest here okay just like that so what we also need is the dispatch and data from our store all right everything is imported fruit State awesome to be imported actually if I should import it the other selectors I wouldn't have to type this but it's not a big deal but now I only need to import our actions okay so let's try to use it I already know it's not gonna work because we forget about one thing but let's just check out what error we are going to see if any all right so the app is building see we have to wait a while so maybe in this moment I will tell you why it's probably not going to work it's because we are using Hooks and hooks can be used only inside a client components and since we didn't set directly it is a client component it's gonna assume it's a server component it's gonna you know okay we've got some errors what we've got here reactored context value component is wrapped okay so I'm just gonna assume that yeah that's our error now we are going to go here and I'm just going to wrap all file if we use client directive but you probably shouldn't do this you should drop only what is really needed so for example here actually only the button and this this fragment oh I'm sorry only this structure needs to be a client component because it needs interaction so I personally would take this to another file use use client there and notice in the whole page uh yeah that would be my Approach let's now go here and it's working I'm gonna zoom in a little bit all right increment decrement so as you can see our store is working properly properly it's so the main takeaway you need to use client directive inside your provider and also in the place where you want to use dispatch and use selector but also the other takeaway is be really careful and thankful about whether you really need Redux in your application because maybe you are just fetching a lot of data and since then you would just use react react query which is a great library for fetching data so that's all for now don't forget to subscribe jump into my Discord server and see you in the next one bye

Channel: Oskar Puchalski

Views: 8,825

Keywords: react.js, next.js, frontend, react-query

Id: xfhQk9CRXbY

Length: 8min 15sec (495 seconds)

Published: Wed Jul 05 2023