Hi and welcome back to this video series about react native and redux.
Today we're going to be exploring what redux persist is and how we can use this
to persist the values that are in our stores even on app reload.
So redux persist is a popular library used
to persist the state of a react native application.
The state of an application is the data
that represents its current state such as the user data or app settings.
Without persistance, this data would be lost every time the app is reloaded.
So for example, if I press here and then I go to my Metro bundler and I reload
the app, my name is going to be changed back to Nata.
So with redux persist we can ensure
that the data remains saved even after an app reload.
This is important for improving the user
experience and making sure that the app is functional even after restarting it.
Now we are going to be configuring redux persist in our react native app.
And for storage we're going to be using something called async storage.
We're going to get into what async storage is and how we can use it a bit later.
But for now, let's install redux persist.
To do that, just go to the root of your
application and then do
npm install redux-persist.
Great.
Now that that's done, we can store creating the configuration.
But before we jump into that, we're going to have to install async storage as well.
And to do that, we're going to have to run
npm install @react-native-async-storage/async-storage
and we're going to have to wait for the execution.
Great.
And we're also going to have to install the pods.
So let's go into iOS folder and do pod install.
Great.
And now that these are done, I would like to close the Metro bundler
that's running here and the simulator as well.
And I'm going to do
npm start -- --reset-cache
I missed two dashes here so it would be like this.
And then I'm going to press I to open the iOS simulator.
And now we have everything ready to get started with the configuration.
So here I'm just going to put these
together because they are coming from the same library.
And then I'm going to import async storage
from react native async store and then I'm also going to import two functions.
One of them called persistReducer and the other one called persistStore
so let's go into what async storage is.
Async storage is a simple, unencrypted,
asynchronous and persistent key value storage system that is global to the app.
It is used to store the data that needs
to persist even if the app is closed such as user preferences or settings.
I think storage is the recommended storage solution for use with redux persist as it
is a fast and efficient way and a great choice for our application.
So the next step is configuring redux persist and we're going to have to use
persistReducer function and this function is used to wrap our reducers
which are responsible for updating the state of our app inside this function.
So this function will ensure
that the state of our app is saved and retrieved from storage correctly.
So we're going to have to create a new constant here called persisted reducer.
And what we're going to do is we're going
to use persist reducer and we're going to have to pass some kind of configuration.
So we're going to have to set up the configuration
and let's call the key in the key value store the root.
And for storage we're going to be using async storage and just for versioning if
we need to set up something later, let's call this version one
and then we're going to pass the configuration here and then we're also
going to give it the root reducer for persisting.
So now that we have all of this set up in the reducer,
we're going to pass the persisted reducer instead of root reducer.
And what we're also going to do is we're going to persist store.
So to do that we're just also going to export persistor.
So let's create it,
let's call it export const persistor persistor and it's going to use persist
store function and we're going to pass it the store.
The persistor function is used to create
a store that can persist our state and this function creates a store that is
capable of saving and retrieving data from storage, ensuring that our app state
remains saved even after an app is reloaded.
Because of all of this setup, we might need to enable our middleware
and we might need to make sure our values are serialized.
Instead of doing that, let's keep the serializable check
by passing this option here and we should be good to go.
And to make sure that we are using this
persistor, we're going to have to go to our app here and we're going to have
to use persist gate and our persistor will be the persistor that we just created.
Okay, let's import persistor from store
and then we're going to say loading is now and let's put all of our code inside here.
Let's save this.
And now if I click here,
my first name is changed and if I reload this, my first name will remain changed.
So this is how you can persist the values even after app reload.
And this is going to profile a better user
experience and ensure that the app continues to function as expected,
even if the user force quits the app or reloads the app.
Thanks so much for watching and I'll see you in the next video.