Encrypting Redux Store To Organize User Data
Posted By : Gyanendra Verma | 09-Mar-2021
Redux is a state management environment that is used to manage and organize user data. The user data is stored in the redux store based on the following concept.
Action is a type of intention of the user. Let's understand it with the help of an example.
Suppose a user logs in to a movie ticketing website which is made on the react-redux and he wants to book a ticket for a Hollywood movie. When he/she will click on the Hollywood tab, an action will be dispatched and this action will hit the API and get the response from Hollywood movies and this response will be passed on to the reducer.
Reducer is a type of function where action types are defined. In reducer, action types are defined like Hollywood and Bollywood. Now the action which was performed by the user and the response of that action will be passed inside the reducer and response will go inside the action type. If an action was of type Hollywood, then it will go inside the Hollywood, otherwise it will go somewhere else. Previously, we dispatched the action for Hollywood movies, so it will go inside the action type of Hollywood.
When the action response will be passed inside the action type, the response of that action will be saved in the redux store. The redux store is nothing but an object of the user data.
A state is an object which stores all the information regarding the action. so here we have dispatched the action for the Hollywood movies so here state for the Hollywood movies store all the information of the Hollywood movies.
Let's create the redux store in the react app.
The codes given below is an example of the redux store.
The codes given below is the redux reducer.
Let's connect the redux store with the react. we will connect the redux store in the main root index page of the react app.
Congratulation now the redux store is successfully connected to the react app. you can see the redux store given below. which contains the user sensitive information. so there is the requirement to encrypt the user sensitive information so that user data can not be hacked and misused.
So now we have to update the store into the latest code which is given below. but first of all, we have to install the new dependency.
If you are using npm:
if you are using yarn:
Now you can see that your redux store will get encrypted.