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?
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.
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With