Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why use redux-persist over manually persisting state to localStorage?

Another way to ask would be, if you really only want to start your app up with the data saved in localStorage (rehydrate) and save every redux state change to localStorage (persist) is using redux-persist any better than using your own solution like Dan Abramov explains here?

I understand redux-persist comes with a lot of other features, and I myself started using it to be able to use redux-persist-crosstab (to be able to deal with changes between apps running in different tabs), but I wonder if it's overkill to use it for the most basic scenario. Especially since it's harder to understand and sometimes does funny stuff, like calling persist/REHYDRATE randomly.

Am I missing anything obvious here?

like image 268
mezod Avatar asked Mar 11 '18 16:03

mezod


People also ask

Why do I need redux persist?

With the Redux Persist library, developers can save the Redux store in persistent storage, for example, the local storage. Therefore, even after refreshing the browser, the site state will still be preserved.

Why we use redux instead of localStorage?

Redux and localStorage have different use cases actually. Redux you'll use to manage your application state across multiple components. Local Storage you'll use to persist properties in the browser for later usage. The problem is that any change on your localStorage won't reflect on your application.

Does redux persist use local storage?

Redux Persist is a library that allows saving a Redux store in the local storage of an application. In React Native terms, Asyncstorage is a key-value based, unencrypted, asynchronous storage system that is global and can be used as the local storage for the app.

Should I keep all component's state in redux store?

Some users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state. Using local component state is fine.


1 Answers

The usage of redux-persist depends upon the use case of the application.

First, let me highlight some of the main features of redux-persist

  • Usage of PersistGate which automatically provides a delay in rendering of the components until the state gets persisted along with the usage to show the loading component.

  • Custom functions to persist based on multiple types such as persistStore, persistReducer and persistObject

  • AutoMerging of the initialStates from the different states based on shallow and deep levels

  • Probably the most important feature of blacklisting and whitelisting the reducers

  • Nested Persistence for shallow level persistence and deep level persistence

  • Persisting with migrations to store different versions of the redux-store.

  • Transforms to support immutable, compression, encrypt, filter, etc.

Considering the application you build is just for development purposes, then it would require at most PersistGate, persistStore and probably blacklist and whitelist of the reducers, which would still be considerable amount of work considering that you are aware what you might need for your application.

Now for the applications that are production level and are prone to scaling, then it would be requiring at least 5 / 7 features that I have listed above. Without this module you might need to install modules for compression, encryption and much more, find a way to gracefully store different versions of the redux-store and retrieve and display what might fit your requirement, along with the rehydration of that redux-store state.

There are many more implications to this, which will be encountered later on. Therefore based on the requirements of the project, I think it would be beneficial to use this package, to manage the redux-store storage

like image 186
Pritish Vaidya Avatar answered Sep 27 '22 17:09

Pritish Vaidya