How to persist redux store safely with using local storage ?

Redux states return to the initial state when the page is refreshed. But losing them can cause unwanted situations.For example authentication informations. There are several ways to keep the Redux store in your browser. These can be various Node JS libraries and Firebase. We will deal with using the browser’s local storage here. But we need to take our security measures to make the redux store permanent.This will be achieved by encrypting the redux store with HSA 256. First we will encrypt the redux store using JWT and set it in the local storage. Then when we want to get the redux store back, we will decode it and send it to the store. For these operations we will build react and redux on meteor JS. Let’s do it.

Introduction for new project:

Step 1 : Build meteor react app and start the app.

$~meteor create — react new-react-app

$~cd new-react-app

$~meteor

Step 2: Redux implementation to the app.

$~npm install react-redux

$~npm install — save-dev redux-devtools

Step 3 : JWT implementation to the app.

$~npm install jsonwebtoken

Step 4 : Required installations, to access the documentation of the technologies we use:

meteor, react, redux, JWT, node JS

Now let’s go programming.

working directory

1) Your hash algorithm example for token

working directory

2) When any state changes , reds store set in local storage.

working directory

3) When page refreshed , persisted state set redux store.

working directory