WEBVTT

1
00:00:00.320 --> 00:00:05.530
Hi and welcome back to this video
series about react native and redux.

2
00:00:05.560 --> 00:00:10.820
Today we're going to be exploring what
redux persist is and how we can use this

3
00:00:10.850 --> 00:00:16.500
to persist the values that are
in our stores even on app reload.

4
00:00:16.530 --> 00:00:19.820
So redux persist is a popular library used

5
00:00:19.850 --> 00:00:23.140
to persist the state
of a react native application.

6
00:00:23.170 --> 00:00:25.420
The state of an application is the data

7
00:00:25.450 --> 00:00:30.500
that represents its current state such
as the user data or app settings.

8
00:00:30.530 --> 00:00:36.260
Without persistance, this data would be
lost every time the app is reloaded.

9
00:00:36.290 --> 00:00:42.340
So for example, if I press here and then I
go to my Metro bundler and I reload

10
00:00:42.370 --> 00:00:47.700
the app, my name is going
to be changed back to Nata.

11
00:00:47.730 --> 00:00:50.260
So with redux persist we can ensure

12
00:00:50.290 --> 00:00:54.300
that the data remains saved
even after an app reload.

13
00:00:54.330 --> 00:00:56.580
This is important for improving the user

14
00:00:56.610 --> 00:01:02.020
experience and making sure that the app
is functional even after restarting it.

15
00:01:02.050 --> 00:01:07.180
Now we are going to be configuring
redux persist in our react native app.

16
00:01:07.210 --> 00:01:11.540
And for storage we're going to be
using something called async storage.

17
00:01:11.570 --> 00:01:16.620
We're going to get into what async storage
is and how we can use it a bit later.

18
00:01:16.650 --> 00:01:20.380
But for now, let's install redux persist.

19
00:01:20.410 --> 00:01:23.020
To do that, just go to the root of your

20
00:01:23.050 --> 00:01:26.791
application and then do

21
00:01:26.991 --> 00:01:31.020
npm install redux-persist.

22
00:01:31.050 --> 00:01:31.780
Great.

23
00:01:31.810 --> 00:01:37.100
Now that that's done,
we can store creating the configuration.

24
00:01:37.130 --> 00:01:42.020
But before we jump into that, we're going
to have to install async storage as well.

25
00:01:42.050 --> 00:01:45.539
And to do that, we're going to have to run

26
00:01:45.739 --> 00:01:50.083
npm install @react-native-async-storage/async-storage

27
00:01:50.283 --> 00:01:54.180
and we're going
to have to wait for the execution.

28
00:01:54.200 --> 00:01:54.620
Great.

29
00:01:54.650 --> 00:01:58.290
And we're also going to have
to install the pods.

30
00:01:58.320 --> 00:02:02.930
So let's go into iOS
folder and do pod install.

31
00:02:02.960 --> 00:02:03.420
Great.

32
00:02:03.450 --> 00:02:07.850
And now that these are done,
I would like to close the Metro bundler

33
00:02:07.880 --> 00:02:12.140
that's running here
and the simulator as well.

34
00:02:12.170 --> 00:02:14.482
And I'm going to do

35
00:02:14.682 --> 00:02:17.160
npm start -- --reset-cache

36
00:02:17.200 --> 00:02:21.300
I missed two dashes here
so it would be like this.

37
00:02:21.330 --> 00:02:26.170
And then I'm going to press
I to open the iOS simulator.

38
00:02:26.200 --> 00:02:30.980
And now we have everything ready
to get started with the configuration.

39
00:02:31.010 --> 00:02:33.860
So here I'm just going to put these

40
00:02:33.890 --> 00:02:38.980
together because they are
coming from the same library.

41
00:02:39.010 --> 00:02:44.080
And then I'm going to import async storage

42
00:02:46.360 --> 00:02:55.140
from react native async store and then
I'm also going to import two functions.

43
00:02:55.170 --> 00:03:05.280
One of them called persistReducer
and the other one called persistStore

44
00:03:07.200 --> 00:03:10.940
so let's go into what async storage is.

45
00:03:10.970 --> 00:03:13.900
Async storage is a simple, unencrypted,

46
00:03:13.930 --> 00:03:19.260
asynchronous and persistent key value
storage system that is global to the app.

47
00:03:19.290 --> 00:03:22.140
It is used to store the data that needs

48
00:03:22.170 --> 00:03:27.860
to persist even if the app is closed
such as user preferences or settings.

49
00:03:27.890 --> 00:03:32.920
I think storage is the recommended storage
solution for use with redux persist as it

50
00:03:32.950 --> 00:03:39.060
is a fast and efficient way and a great
choice for our application.

51
00:03:39.090 --> 00:03:44.300
So the next step is configuring redux
persist and we're going to have to use

52
00:03:44.330 --> 00:03:49.180
persistReducer function and this
function is used to wrap our reducers

53
00:03:49.210 --> 00:03:54.820
which are responsible for updating the
state of our app inside this function.

54
00:03:54.850 --> 00:03:57.020
So this function will ensure

55
00:03:57.050 --> 00:04:02.460
that the state of our app is saved
and retrieved from storage correctly.

56
00:04:02.490 --> 00:04:08.780
So we're going to have to create a new
constant here called persisted reducer.

57
00:04:08.810 --> 00:04:11.000
And what we're going to do is we're going

58
00:04:11.030 --> 00:04:17.380
to use persist reducer and we're going to
have to pass some kind of configuration.

59
00:04:17.410 --> 00:04:21.640
So we're going to have to set up
the configuration

60
00:04:24.240 --> 00:04:30.740
and let's call the key in the key
value store the root.

61
00:04:30.770 --> 00:04:36.260
And for storage we're going to be using
async storage and just for versioning if

62
00:04:36.280 --> 00:04:40.660
we need to set up something later,
let's call this version one

63
00:04:40.690 --> 00:04:45.700
and then we're going to pass
the configuration here and then we're also

64
00:04:45.720 --> 00:04:51.300
going to give it the root reducer
for persisting.

65
00:04:51.330 --> 00:04:54.940
So now that we have all of this set up
in the reducer,

66
00:04:54.970 --> 00:04:59.740
we're going to pass the persisted
reducer instead of root reducer.

67
00:04:59.770 --> 00:05:04.420
And what we're also going to do
is we're going to persist store.

68
00:05:04.450 --> 00:05:09.460
So to do that we're just also
going to export persistor.

69
00:05:09.480 --> 00:05:10.700
So let's create it,

70
00:05:10.720 --> 00:05:20.780
let's call it export const persistor
persistor and it's going to use persist

71
00:05:20.800 --> 00:05:26.260
store function and we're
going to pass it the store.

72
00:05:26.280 --> 00:05:29.060
The persistor function is used to create

73
00:05:29.090 --> 00:05:33.580
a store that can persist our state
and this function creates a store that is

74
00:05:33.600 --> 00:05:38.740
capable of saving and retrieving data
from storage, ensuring that our app state

75
00:05:38.770 --> 00:05:43.240
remains saved even after
an app is reloaded.

76
00:05:44.720 --> 00:05:49.980
Because of all of this setup,
we might need to enable our middleware

77
00:05:50.010 --> 00:05:55.540
and we might need to make sure
our values are serialized.

78
00:05:55.570 --> 00:05:59.140
Instead of doing that,
let's keep the serializable check

79
00:05:59.170 --> 00:06:02.900
by passing this option here
and we should be good to go.

80
00:06:02.920 --> 00:06:05.340
And to make sure that we are using this

81
00:06:05.360 --> 00:06:09.560
persistor, we're going to have to go
to our app here and we're going to have

82
00:06:09.590 --> 00:06:16.980
to use persist gate and our persistor will
be the persistor that we just created.

83
00:06:17.010 --> 00:06:22.420
Okay, let's import
persistor from store

84
00:06:22.450 --> 00:06:31.600
and then we're going to say loading is now
and let's put all of our code inside here.

85
00:06:31.800 --> 00:06:33.020
Let's save this.

86
00:06:33.040 --> 00:06:35.220
And now if I click here,

87
00:06:35.250 --> 00:06:42.660
my first name is changed and if I reload
this, my first name will remain changed.

88
00:06:42.690 --> 00:06:48.020
So this is how you can persist
the values even after app reload.

89
00:06:48.040 --> 00:06:50.260
And this is going to profile a better user

90
00:06:50.290 --> 00:06:55.460
experience and ensure that the app
continues to function as expected,

91
00:06:55.480 --> 00:07:00.020
even if the user force quits
the app or reloads the app.

92
00:07:00.040 --> 00:07:02.680
Thanks so much for watching
and I'll see you in the next video.