Encrypting Redux Store To Organize User Data

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.
 

1- Action

2- Reducer

3- store

4- state

Action

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

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.

Store:

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.

State:

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.

import { createStore } from 'redux';

import Storage from 'redux-persist/lib/storage';

import { persistStore, persistReducer } from 'redux-persist';

import { rootReducer } from "./reducer";

const persistConfig = {

  key: 'root',

  storage: Storage,

  blacklist: ["yourKeyReducer"]

}

 

const persistReducers = persistReducer(persistConfig, rootReducer);


 

export  let store = createStore(persistReducers)

export let persistor = persistStore(store)

The codes given below is the redux reducer.

function userReducer(state = initialState, action: any) {
  switch (action.type) {
    case HOLLYWOOD:
      return {
        ...state,

        hollywood: action.payload,
      }

    case bollywood: {
      return {
        ...state,

        bollywood: action.payload,
      }
    }

    default:
      return state
  }
}

export default userReducer

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.

import React from "react"
import ReactDOM from "react-dom"
import * as serviceWorker from "./serviceWorker"
import Routing from "./Routing"
import { Provider } from "react-redux"
import { store } from "./redux/store"

ReactDOM.render(
  <Provider store={store}>
    <Routing />
  </Provider>
  ,
  document.getElementById("root"),
)

serviceWorker.unregister()

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:

npm install redux-persist-transform-encrypt

if you are using yarn:

yarn add redux-persist-transform-encrypt

import { createStore } from "redux"
import Storage from "redux-persist/lib/storage"
import { persistStore, persistReducer } from "redux-persist"
import { rootReducer } from "./reducer"
import createEncryptor from "redux-persist-transform-encrypt"

const encryptor = createEncryptor({
  secretKey: "my-super-secret-key",
  onError(error: Error) {
    // Handle the error.
  },
})

const persistConfig = {
  key: "root",
  storage: Storage,
  blacklist: ["yourKeyReducer"],
  transforms: [encryptor],
}

const persistReducers = persistReducer(persistConfig, rootReducer)

export let store = createStore(persistReducers)
export let persistor = persistStore(store)

Now you can see that your redux store will get encrypted.