How to make your Redux store persistent

A guide for making your redux store persistent through refreshes(Rehydrating your store through localStorage)

When I was introduced with redux by my trainer I was told that you will use this store for various applications and one of the major applications of redux store is creating carts for an e-commerce website. I was always keen to learn technologies and the way industry employees it So, I began my first e-commerce project after completing my training and project assigned to me by my trainer. One of the biggest problems I faced then was losing my cart every time I refreshed or opened my project in a new tab. I felt cheated by my trainer and then I started my own research and came to the conclusion that e-commerce today is just not programming and bare coding so I should not waste my time on researching. After all this research my problem remains unsolved So I started looking over the internet and the solution was easier than I expected (localStorage).

What is localStorage?

localStorage is a store available in the browser which stores key/value pair indefinitely. The data stored has no expiration date and can be retrieved any time (a day,month, an year…) later. You can access the object using localStorage keyword. It has some predefined methods some of them are mentioned below.

• setItem() : helps to store/set the data in localStorage under a key. for eg., If you want to save a name(key) say Qasim(value) in the localStorage you can run the following code in JS

localStorage.setItem("name", "Qasim");

• getItem() : helps to retrieve data from the localStorage. getItem takes the key as an Input parameter. Let’s continue the example and retrieve the name.

localStorage.getItem("name")

the output of the code will be Qasim.

Note: If you want to setup the redux store in react in an easy way please refer to this article.

Enough of the introduction let’s go straight to the code and make our hands dirty.

1. Setup your store.js file as usual and before creating the store object by createStore do some hack.
2. Create a function to store the state in localStorage below is the code of the function:

Here we just simply converted the state(an Object) to String and saved it in localStorage under the key state.

3. Subscribe to the store updates and call the function to store the new state. Retrieve the store using getState method.

4. Create another function to fetch the state saved inside your store to pass it in the createStore function. In this method, we parse object out of the string stored inside the localStorage and after checking if it’s there or not we return it.

5. Call the createStore function to create the store object by passing your reducer, call the function loadFromStorage after it. Use your persisted state now and have fun developing.

const store = createStore(reducer, loadFromStorage())

Thank You!!!