WEBVTT

1
00:00:00.240 --> 00:00:04.900
Hi and welcome back to our
video tutorials on React Redux.

2
00:00:04.930 --> 00:00:09.820
So today we're going to be talking about
how to create a new reducer

3
00:00:09.850 --> 00:00:15.300
for the donation items so that we can
select a category and select the items

4
00:00:15.330 --> 00:00:19.180
from our donation list that match
up with those categories.

5
00:00:19.210 --> 00:00:23.900
I also want to talk about
resetting and purging our stores.

6
00:00:23.920 --> 00:00:27.380
So we're going to be seeing
an example in this video for that.

7
00:00:27.400 --> 00:00:35.260
So first let's create the donations.js
file and let's create the slice here.

8
00:00:35.290 --> 00:00:40.900
Let's import it from Redux toolkit.

9
00:00:40.930 --> 00:00:43.620
Redux Toolkit.

10
00:00:43.650 --> 00:00:45.620
And then we want to be creating

11
00:00:45.650 --> 00:00:49.500
the donations
and we're going to use the create slice

12
00:00:49.530 --> 00:00:52.420
function for that and pass
in some options.

13
00:00:52.450 --> 00:00:56.300
And first of all, we're going to give it
a name that is going to be donations.

14
00:00:56.330 --> 00:00:58.860
And we're going to give
it some initial state.

15
00:00:58.890 --> 00:01:01.380
And that initial state is going to be

16
00:01:01.410 --> 00:01:05.340
grabbed from an object that we
are going to create here.

17
00:01:05.370 --> 00:01:11.260
An initial state is going to have items
for the donation items and it's also going

18
00:01:11.290 --> 00:01:18.410
to have a selected donation
ID that is going to be set to null.

19
00:01:18.440 --> 00:01:20.340
And the reason we're going to be needing

20
00:01:20.370 --> 00:01:25.900
this selected donation ID is because
whenever a user clicks on this item,

21
00:01:25.930 --> 00:01:31.100
what we want to do is we want to redirect
them to a new page and save the selected

22
00:01:31.130 --> 00:01:39.620
ID so that we can display the information
according to the selected donation ID.

23
00:01:39.650 --> 00:01:41.850
Now what we're going to do is create some

24
00:01:41.880 --> 00:01:47.850
reducers and we're going to have a reset
donations reducer that is going to take

25
00:01:47.880 --> 00:01:52.140
in nothing and just return
our initial state here.

26
00:01:52.170 --> 00:01:58.060
And then we're also going to have
an updater for our selected donation ID.

27
00:01:58.090 --> 00:02:04.140
And it's going to take the current state
and the action that we pass here and set

28
00:02:04.170 --> 00:02:11.340
the state selected donation
ID to whatever we pass here.

29
00:02:11.370 --> 00:02:13.380
payload great.

30
00:02:13.410 --> 00:02:18.580
So now what we want to do is go here
and create the donations

31
00:02:18.610 --> 00:02:25.700
and use the donations that we created
inside here and let's import it from here.

32
00:02:25.730 --> 00:02:30.940
But to do that, we're also going
to have to export the reducer.

33
00:02:30.970 --> 00:02:39.450
So let's export default donations reducer
and let's export these functions as well.

34
00:02:39.480 --> 00:02:46.460
Set donations and update selected donation
ID so that we can use it whenever we want

35
00:02:46.490 --> 00:02:49.660
and those are going
to come from the actions.

36
00:02:49.680 --> 00:02:53.980
Great.
So now we should be having no issues here.

37
00:02:54.010 --> 00:02:56.820
And now if we go to our home page,

38
00:02:56.850 --> 00:03:00.180
let's just quickly console log
what's inside our donations.

39
00:03:00.210 --> 00:03:02.700
So let's use the selector for that.

40
00:03:02.730 --> 00:03:05.920
Let's call it donations.

41
00:03:06.320 --> 00:03:11.380
And I'm going to get rid of this logger

42
00:03:11.410 --> 00:03:17.820
here so that we're able to see what
we're console logging very clearly.

43
00:03:17.850 --> 00:03:21.260
And here I'm going to say console log.

44
00:03:21.290 --> 00:03:27.700
This is our current donation
state and then donations.

45
00:03:27.730 --> 00:03:31.340
So let's reload our
application and we see.

46
00:03:31.370 --> 00:03:33.500
This is our current donation state

47
00:03:33.530 --> 00:03:38.100
and then items are empty and selected
donation ID is set to null.

48
00:03:38.130 --> 00:03:40.780
And what I'm quickly going to do here is

49
00:03:40.810 --> 00:03:45.340
I'm going to go and copy the items
that we want to paste here.

50
00:03:45.360 --> 00:03:45.740
Great.

51
00:03:45.770 --> 00:03:48.860
So I have copied it and I'm
going to paste it here.

52
00:03:48.890 --> 00:03:50.420
I'm going to save this.

53
00:03:50.450 --> 00:03:56.380
And we have this in our initial state
right now that was set from here.

54
00:03:56.410 --> 00:04:01.380
And if I go to my home page and check out
what's inside my donation items,

55
00:04:01.410 --> 00:04:05.220
I'm going to say that there is
nothing inside these items.

56
00:04:05.250 --> 00:04:06.610
And this is expected.

57
00:04:06.640 --> 00:04:10.020
And it is expected because whenever we

58
00:04:10.050 --> 00:04:17.820
created the donation slice for our store,
what happened is that it already got

59
00:04:17.840 --> 00:04:22.540
the initial state,
which was items that were empty,

60
00:04:22.570 --> 00:04:28.500
and it put it in the async storage and
persisted the state.

61
00:04:28.530 --> 00:04:31.740
So the only way to update these items

62
00:04:31.770 --> 00:04:36.940
from now on is going to be
from the reducer itself.

63
00:04:36.970 --> 00:04:40.260
So we don't have to call a reset donations

64
00:04:40.280 --> 00:04:46.980
function that would reset our initial
state for the donation store.

65
00:04:47.010 --> 00:04:53.700
Or the second way to do this is going
to purge the whole store and reset

66
00:04:53.720 --> 00:04:59.060
everything like user settings, categories,
and donation to its initial state.

67
00:04:59.090 --> 00:05:01.940
So first of all, I'm just
going to quickly try that.

68
00:05:01.970 --> 00:05:08.220
To do that, all you need to do
is say persistor, purge here.

69
00:05:08.250 --> 00:05:14.020
And this file is naturally going to be
called so this function will work.

70
00:05:14.040 --> 00:05:15.660
And if I reload now,

71
00:05:15.690 --> 00:05:20.940
I'm going to see that donation
state has bunch of items inside it.

72
00:05:20.970 --> 00:05:25.780
But if I want to, what I also
could do is go to donations.

73
00:05:25.800 --> 00:05:27.900
I'm quickly going to get rid of this

74
00:05:27.920 --> 00:05:34.260
again, okay, so let me
copy it and get rid of it.

75
00:05:34.290 --> 00:05:36.540
And I'm going to leave
the purge function in.

76
00:05:36.570 --> 00:05:38.180
So it should have already ran,

77
00:05:38.210 --> 00:05:41.620
but I'm going to reload
and now my items are empty.

78
00:05:41.650 --> 00:05:44.920
So if I get rid of this,
I want to show you the different way as

79
00:05:44.950 --> 00:05:50.940
well and put the items back
here and go to my whole page.

80
00:05:50.970 --> 00:05:53.940
If I were to reload, my items should still

81
00:05:53.970 --> 00:05:57.300
be empty because I haven't
dispatched any action.

82
00:05:57.330 --> 00:06:01.940
But if I dispatch from here,

83
00:06:01.970 --> 00:06:10.660
reset donations now, let's import
this quickly and let's reload.

84
00:06:10.690 --> 00:06:16.180
I'm going to see that because I use the
reducer, all of my items are back here.

85
00:06:16.210 --> 00:06:19.100
So whether you decide to purge or whether

86
00:06:19.130 --> 00:06:25.340
you decide to reset from the donations
here or your reducers, it's your choice.

87
00:06:25.360 --> 00:06:29.960
But if you're ever facing an issue where
you want to overwrite the items and you

88
00:06:29.980 --> 00:06:35.080
don't get the updated values,
it's because you need to purge or you need

89
00:06:35.100 --> 00:06:39.940
to reset the items specifically
from your reducers.

90
00:06:39.970 --> 00:06:43.060
And I'm going to get rid of this now.

91
00:06:43.090 --> 00:06:46.180
And actually, I will leave these items

92
00:06:46.210 --> 00:06:50.100
here and it's going to be in the
description of the video as well.

93
00:06:50.130 --> 00:06:53.940
But I will go in more details about what's

94
00:06:53.970 --> 00:06:57.380
defined here and why we might
need it in the next video.

95
00:06:57.410 --> 00:06:58.580
And in the next video,

96
00:06:58.600 --> 00:07:04.940
we're also going to set up the donations
items to be shown up here.

97
00:07:04.960 --> 00:07:08.120
So thanks so much for watching
and I'll see you in the next video.