Redux Persist vs LocalStorage
Hi Viewers!
A lot of us have confusion, what to choose for storing the state, redux persist or manually persisting state to localStorage. It’s a common question to all the front-end developers, that why we are using redux persist if we can directly use localStorage to store the UI data. And also, why we are installing a lot of packages, while we can use a single line of code and do the same thing and it’s less complicated too.
So, let’s start with some Basic Introductions-
Redux Persist — It takes your redux state and saves it to persisted storage (i.e., localStorage, sessionStorage and etc).
localStorage — localStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.
Now, let’s highlight some great features of Redux Persist —
1. One of the best features of the redux persists is that it provides us with the PersistGate — it helps us to delay the rendering until the state has been retrieved and saved to redux. Here we can show loading components until our state gets the persisted value.
2. Another great feature it provides Blacklist & Whitelist. By this, we can choose which state we want to persist in and which we don’t want.
3. It provides us with Transforms — It allows us to customize our object that gets persisted and rehydrated. By using this we can encrypt the object, filter it, set an expiration value for an object, compress, etc.
4. Provides us with different storage engines such as — localStorage, sessionStorage, AsyncStorage, etc.
5. The State Reconciler property provides us with different options to how to restore or merge the incoming state values at different deep and shallow levels.
6. There are also different custom functions such as persistReducer and persistStore which helps us to store and call the states.
Now, why do we need to use it?
So, now if we are developing an application on the production level we will be requiring at least 3 or 4 features from the above. During refresh or close of the tab, we need to restore the state once the application is running. Sometimes we need encryption of data that is stored in localStorage. Also, we need to show the loading symbols until our application gets the required data. Also, one of the scenarios is that suppose we are having approx 20 states in which we only want 5 of the states to be persisted and also all the states are interdependent to each other. In this case, the ideal solution will be using redux-persist. It will be saving us from a lot of packages installation.
I think now this thing will be making a little sense.
But I can still manually persist state in localStorage?
Yes, we can but if we don’t want the above-mentioned features in our application. If our application is very small or if we require only one or two-state to be persisted and it is not dependent on other states.
I hope I was able to clear your doubts. If you still have doubts you can comment below!
Also, have a look at redux-persist documentation.
That’s all folks.
Thank you!
