This video is available to students only

Adding User Slice

In this lesson, we're going to add user slice

Now that our login function is working fine and we are able to make a request and receive a response, we need to store the user's data so that they stay logged in. Since we're using redux toolkit, we need to create a new slice, and we can call it userSlice. We also need to create a new model for the user. So inside user.ts, let's export interface user. Inside, we need email of type string and token of type string.

client/src/models/user.ts

Coming back to the user slice, let's start with the interface userState which will have a user of type User which we just created or it can be null when the user is not logged in. Now we can create the initial state which will be of type user state and the user property will be null by default. Then we can export const the userSlice which will be equal to the createSlice. The parameter object will accept a name which can be simply user, then the initial state and finally the reducers which can be empty for now. We can now register this inside our store, so let's go to the configure store and add user to be userSlice dot reducer.

Coming back to the user slice, let's write our async function now. Let's export const signInUser which will be equal to the createAsyncThunk which we need to import. We will return the User from this method; so inside the angled bracket, we can write User, and as parameter, we need to pass data which will be of type Login; so I can write Login. Inside the parenthesis, we need to write the prefix; let's call it user/signin. We can write the function now; it's going to be async, and as parameters, we will have data and thunkAPI. Now we can create a try catch block. If it's an error, we can return thunkAPI.rejectWithValue with the error. Inside the try block, we will store the response inside user constant and will call agent.Users.login and pass the data.

After this, we need to store the user object somewhere. Even if we store it inside redux, it will be gone once the user refreshes the application, and we don't want to lose the user token when they refresh for some reason. So what we can do is store it inside the local storage. We stored the client Id inside cookie but in case of the user token, using local storage is a better solution. Below the api call, we can use localStorage.setItem and we can keep the key to be user and we want to pass the user value. We can't directly use the user object, so we'll have to stringify it first. We will use JSON.stringify and then pass the user. Finally, we can return the user.

Well, our login and register user functions are not much different. Both of them return a user, so we can simply copy the signInUser and paste it below. We can name it registerUser, and change the type to Register. Also, the prefix name should be user/register. Let's also change the name of Users.login to Users.register; everything else can stay the same.

Start a new discussion. All notification go to the author.