How to integrate Redux toolkit + Redux persist with NextJS app router

hello everybody uh today I will demonstrate how we can integrate Redux Redux toolkit and Redux parist into our next JS app router application so this is a simple demo where we have two sibling components so in order for them to communicate data uh we can use Redux and currently it's actually doing that so you'll notice I have two buttons here login and log out and when I click the status on the other component changes and doing it through Redux so this is what we're going to build at least or at least I'm going to show how to build and if you want the shortcut version you can just go to this repository I will add it in the description uh you you will have the step by step of what to do in the read me so let me first uh show you what this application can do and then I will show you how how to build it so the first functionality is simple integrating redex and the second functionality is how do we persist the state as well for example let's say I'm currently in the login state if I refresh it you will see that I stay in the log in state if I log out you will see that I stay logged out so this is happening through Redux parist and this functionality is particularly useful when you are handling authentication scenarios because you don't want your users to log in over and over again whenever they refresh the page so uh let's get started so this is our page component let me zoom in a little bit to to see to show you how it's working so this is our main page and here we have two child components Au updator and Au viewer so this is the Au updator component and this is the viewer component basically they are updating the state and viewing the state so this is our ultimate goal to do that the first thing that you have to do is you have to install three uh dependencies and uh Redux forist re Redux and another one is Redux toolkit you will get the command here so Redux toolkit react Redux and Redux persist I already have them installed so I'm not going to install them again uh the second thing is uh and by the way this is just a plain nextjs application with the app router itself I have created a new folder called store here the first thing to create is uh creating a piece of slice so a slice is basically a piece of what you want want to store so you want to store everything related to authentication you create Au slice let's say you have a bunch of posts you create a post slice so whatever you want to store or communicate you will create separate slices for them so just for demonstration purpose I am storing only the Au State here here you can see I'm initializing the state I'm creating a slight slice and this slice is coming from Redux toolkit so Redux toolkit actually makes it easier to manage uh uh or easier to handle these situations in a very concise way so we are giving it a name passing the initial State and we are defining the reducers here we have only one reducers we want to set the out State true or false that's it so that's the first thing uh second thing is you will go create a index.ts file so this is our actual store file so a couple of things are happening here uh first of all don't for now let's not let's say that you don't see right so this is pretty simple again we have a store we have reducer we have middle web and that's it right this is the plain setup for Redux without Redux persist okay but if you want to do or if you want to add Redux persist you have to add this pieces of code let me show you so first to define the config white list means which part of the state I'm I want to store for example let's say I have another state here so let's say I have username right but I don't want to store the username then in the white list I will not add username which means Redux purist will not store our username so this is particularly useful when you are storing sensitive data so let's say you don't want to store token or API token things then you will not add it in the white list that's a simple as that and in the root reducer uh you are just passing the parist config with our original reducer which is our actually original slice so that's about it about the store from the store we are exporting two methods one is use app dispatch this is to update the store and another one is use app selector this is to select a piece of store I mean accessing the data next part uh whenever we are using Redux we have to wrap our whole application and for that we are creating a provider here so this is our provider component this line is opt optional these two lines these are only for Redux parist so this is our plain provider and if you want to add Redux parist you just add this two lines here so basically we are creating a higher order component that is taking the children and you are just wrapping your application here so one thing to note here why I'm creating this rux provider separately the problem with app router is app router is by default rendering all of the pages on the server site but Redux only works on the client side so with this provider whenever we need to pass any data between the components we need to add this provider to those specific components or that specific part of the application because we don't want to make our whole application by default client set rendered right because that beats the whole purpose of next app router so that's why I created this reusable provider and we will add it whenever we need it that's the idea so why do we add it if you go to our page you will see that I'm adding it to our uh index page and here I'm adding this use client because otherwise it will not work as I said earlier Redux only works on the client side so you add this here and now both of these components should have access to the Redux store how do we see it you go to the app of updator uh I'm accessing this function from what we exported from our store and in the button we can see that we can just dispatch a particular action to update the store similarly if you go to this Au viewer component you'll see that we're using this use app selector to access a particular piece of the state in our case it is state do do state where is this o coming from if you go to the store you will see that we are storing this part of the store under the o key that's why our code is State do. o. state so that is how it's working and that is our final result so just a bit of caution uh in this page we mark this as used client but let's see want you don't want to make this page a client component then you can just create a child component let's say Au um right and let's see you mark this part as use client and then move everything from here to here basically everything let me just pull up everything here right and in your index page you can just call op container and remove this Ed client from here so that's how you can do it as well so this way your page remains server side rendered but this component becomes a client set component now because nextjs app router supports that so uh that's it uh feel free to check out the GitHub repository also I have my personal blog as well if you want to check that out uh I have some other articles here for you as well that's about it uh thank you so much for watching and if you want you can like subscribe whatever bye

Channel: Mohammad Faisal

Views: 1,757

Keywords: redux, redux persist, nextjs app router, nextjs, react, react-redux, nextjs 13, nextjs 14, state management in next, global state management in nextjs

Id: geXEOkYb5Wc

Length: 8min 49sec (529 seconds)

Published: Mon Jan 29 2024