Greetings! In this video, I am building a simple user login through redux toolkit, persist and with the use of an API call What it does is basically I have a login form to enter my credentials. The login button will call an API through redux toolkit And as a result, I am logged in and getting a user object. Let me show you guys I am logged in, here I got my first name, email from my user object with a logout button In this application, we are going to use redux persist which is a library to persist redux store persist means the data/state should remain visible even though you refresh the page or restart the browser You can use redux persist in those parts of your application where you need to persist your data You don't necessarily need to persist your whole store, you can include those reducers in which you need to persist your state Redux Persist behind the scenes does exactly what we do..saving the data in Local Storage Redux persist either saves the data in local storage, cookies or session storage redux persist convert the data in string and then save it just like we manually do in local storage The point is as long as we have data stored in local storage, redux will get the data from it and show it to us in the UI until or unless I click logout I logged in again and my data persisted. Let's start coding So Guys this is my App.jsx and here the routing system is implemented When path is forward slash then Home component will render and when path is /login then Login component will render In Home.jsx we have userObj from redux state When we have userObj then I am showing firstName, email with a logout button that logouts the user by dispatching an action clearUser() clearUser action will simply make the userObj null Initially or after logout when we have userObj null then we will show the below text and a login button that directs the user to the login form Let me remove this part of code for now Basically, the login component consists of a login form, on submit it will call the handleLogin function in the function we will set loading to true that is initially false and we will set loginError to null In the form, I have an email and password field with the states for both of them to hold their value After that, I have a submit button that will render its text conditionally on loading Since we are calling login API here which makes the function asynchronous that is why I am using a loading state If the loading is false then we will show Login text otherwise Please Wait... If we have loginError only then we will show it dispatch will be used to dispatch action to the reducer After a successful login, we will be redirected to the home route ("/") In the Home Page we will have userObj by then and we will see the user first name and email Before dispatching an action here, let's set redux store I have a store folder in the src folder, store folder has a direct child index.js which is our store inside store folder resides our slices folder which contains UserSlice.js slices folder may have more folders containing slices files if you are working on a bigger scope of application Lets setup redux store configureStore is imported from @reduxjs/toolkit library You can install this package using
npm install @reduxjs/toolkit configureStore takes an object with reducer as its key, I will provide persistedReducer as the value persistReducer needs to be imported from redux-persist library You need to install redux-persist which I have already done You need to install all these packages via
npm install package-name persistReducer will take persistConfig and rootReducer combineReducers will combine all of your reducers in the rootReducer variable, in our case, we only have one We will write UserSlice shortly But let me import UserSlice here Lets write persist configuration perisistConfig is an object that takes key with value of root It also takes storage We need to import storage storage has a default value that is browser local storage At the end we will export our store Although we have persisted our store But we need our app know about it so we will go to the main.jsx Here we need to wrap our app in PersistGate Persist Gate takes a prop persistor, I will give the value with same name Lets define persistor We will provide our store to the persistStore And with this we have persisted our app state with the redux store Let's move to the UserSlice In the UserSlice, firstly we will create a slice createSlice takes an object with the name as its first key the second key is initialState, here I will use userObj because from the API response we are getting user object initially, it will be null the third key is reducers in reducers, we provide actions to manipulate the state, here in our case I will provide clearUser clearUser job is to make userObj null again when user clicks the logout button After the reducers, we provide extraReducers In extraReducers, we write our action cases that are pending fulfilled or rejected we use createAsyncThunk whenever we are dealing with something asynchronous like calling API's or dealing with databases The first parameter of createAsyncThunk is a string and the second parameter is an async function It will receive userCred from the component, userCred is an object with email and password I will dispatch the action with userCred from here Let me export the slice reducer and actions first This loginUser is getting called with the userCred from the component I have a real API, this is why I can not share hostName with you hostName resides and exported from the config file in the body I have passed an object userCred that consists of user email and password request.data.data is a user object Lets write cases here When the case is pending then we will make user object null When the case is fulfilled then we will set the action.payload to the state.userObj Whatever we return from the function comes to the action.payload Let me show you what are we getting in the response I am getting a syntax error here another little syntax error. Since I was already logged in so this is why I am getting my user object here Let me logout and login again I am getting invalid credentials error I was also not setting setLoading to false That is why I was getting please wait even after the request was completed Anyway in the response my payload is undefined and we have an invalid credentials error So, we need to use conditions in the then block If the payload is not undefined then empty the form and navigate user to the home page In the else block, we have another condition for customize error message If the request fails due to 401 then show the customize error message else show the axios error message Let's try with wrong credentials first Loading state becomes false again and I got the custom error message Now, I will provide correct password I am logged in now and my data is persisted So in this video, you get to see how you can implement a persistent user login through API Call in your redux store with redux persist I hope this video might be any help to you and if it is then don't leave without subscribing Thank you! See you later
