1
00:00:01,290 --> 00:00:04,920
‫Okay, so the last thing that we need to do is

2
00:00:04,920 --> 00:00:09,920
‫to also convert our customer slides to Redux Toolkit.

3
00:00:11,490 --> 00:00:16,080
‫And actually I want to leave this for you as a challenge.

4
00:00:16,080 --> 00:00:18,870
‫So if you'd like, you can pause the video now

5
00:00:18,870 --> 00:00:22,680
‫and based on what we did earlier with the account slides,

6
00:00:22,680 --> 00:00:25,560
‫you can convert this code that we have here

7
00:00:25,560 --> 00:00:30,210
‫also into the Redux Toolkit way of doing things.

8
00:00:30,210 --> 00:00:31,560
‫So pause the video now

9
00:00:31,560 --> 00:00:34,200
‫and once you're done I will do the same.

10
00:00:34,200 --> 00:00:38,100
‫So just to see if we are doing it in the same way.

11
00:00:38,100 --> 00:00:42,720
‫Now just before pausing, notice that here,

12
00:00:42,720 --> 00:00:47,720
‫this Create customer right now needs these two arguments.

13
00:00:47,760 --> 00:00:50,970
‫So it receives the full name and the national ID

14
00:00:50,970 --> 00:00:54,180
‫which means that you will again need to prepare

15
00:00:54,180 --> 00:00:59,180
‫the payload just like we did in this one reducer right here.

16
00:01:00,957 --> 00:01:04,650
‫You also have to prepare the payload for the reducer

17
00:01:04,650 --> 00:01:07,053
‫and so here you'll have to do the same thing.

18
00:01:08,220 --> 00:01:11,583
‫So take a minute now and then I meet you back here.

19
00:01:13,800 --> 00:01:18,393
‫All right, so let me now show you how it is done.

20
00:01:19,770 --> 00:01:24,100
‫So changing again the initial state name

21
00:01:25,050 --> 00:01:27,480
‫and then let's get rid of this.

22
00:01:27,480 --> 00:01:32,480
‫And then of course React is gonna complain, but nevermind,

23
00:01:32,670 --> 00:01:34,740
‫we will fix it soon.

24
00:01:34,740 --> 00:01:37,923
‫So let's import createSlice.

25
00:01:40,620 --> 00:01:45,620
‫And so this is gonna be the customer slice,

26
00:01:49,470 --> 00:01:53,250
‫which is the result of createSlice.

27
00:01:53,250 --> 00:01:58,053
‫Okay, so the name here is customer.

28
00:01:59,100 --> 00:02:01,510
‫Then we need the initial state

29
00:02:02,400 --> 00:02:04,743
‫and then we have our reducers.

30
00:02:09,510 --> 00:02:13,740
‫So the first one is, again, create customer,

31
00:02:13,740 --> 00:02:15,070
‫which is what we have here

32
00:02:16,170 --> 00:02:20,310
‫and so for this one we need to again prepare the data.

33
00:02:20,310 --> 00:02:22,440
‫So preparing the payload

34
00:02:22,440 --> 00:02:25,860
‫and so here we need to not create a function

35
00:02:25,860 --> 00:02:29,370
‫or a method, but instead this object.

36
00:02:29,370 --> 00:02:32,820
‫And so in this object is where we will then place

37
00:02:32,820 --> 00:02:34,080
‫the methods.

38
00:02:34,080 --> 00:02:36,183
‫So first prepare.

39
00:02:37,140 --> 00:02:40,530
‫And so it is this prepare method which will actually

40
00:02:40,530 --> 00:02:44,820
‫receive the data that we pass into the action creator.

41
00:02:44,820 --> 00:02:47,850
‫Remember that, and so this is the one that receives

42
00:02:47,850 --> 00:02:52,230
‫the full name and the national ID.

43
00:02:52,230 --> 00:02:56,550
‫Now, by the way, so writing the method like this

44
00:02:56,550 --> 00:03:00,330
‫is exactly the same thing as writing this.

45
00:03:00,330 --> 00:03:04,500
‫So this is just a simplified way of writing methods

46
00:03:04,500 --> 00:03:06,183
‫in modern JavaScript.

47
00:03:07,440 --> 00:03:10,950
‫Now write and so remember that here we need to return

48
00:03:10,950 --> 00:03:12,393
‫the payload now.

49
00:03:13,860 --> 00:03:18,300
‫And so that payload is made out of the full name,

50
00:03:18,300 --> 00:03:19,770
‫the national ID

51
00:03:19,770 --> 00:03:24,030
‫and then remember also the created at property,

52
00:03:24,030 --> 00:03:29,030
‫which we set to new date and then to this ISO string.

53
00:03:32,460 --> 00:03:36,030
‫Now right and so this is again the kind of

54
00:03:36,030 --> 00:03:40,110
‫small side effect that you should not do inside the reducer

55
00:03:40,110 --> 00:03:44,040
‫but instead right here in this prepare function.

56
00:03:44,040 --> 00:03:48,570
‫So in case you wanted to add this created ad here

57
00:03:48,570 --> 00:03:52,410
‫or maybe you also want it like for example to compute

58
00:03:52,410 --> 00:03:56,940
‫a random ID, then you should not do that in the reducer.

59
00:03:56,940 --> 00:03:59,640
‫But instead then you should also create

60
00:03:59,640 --> 00:04:01,980
‫a prepare method like this.

61
00:04:01,980 --> 00:04:06,930
‫So even if this only takes for example, one input,

62
00:04:06,930 --> 00:04:10,230
‫then you still would have to do this prepare function

63
00:04:10,230 --> 00:04:14,160
‫if you wanted to create a date or assign a random ID

64
00:04:14,160 --> 00:04:15,513
‫or something like that.

65
00:04:17,700 --> 00:04:22,700
‫All right but anyway, now we can write our reducer

66
00:04:22,980 --> 00:04:24,690
‫which gets the state

67
00:04:24,690 --> 00:04:28,590
‫and then that payload that we just created here.

68
00:04:28,590 --> 00:04:31,620
‫So exactly this object.

69
00:04:31,620 --> 00:04:35,100
‫So this is what our reducer will now receive

70
00:04:35,100 --> 00:04:38,850
‫and so now we can do what we did before,

71
00:04:38,850 --> 00:04:41,760
‫which is to then set all these properties.

72
00:04:41,760 --> 00:04:46,760
‫So the full name will become action.payload.fullName.

73
00:04:49,950 --> 00:04:54,950
‫State.nationalID will become action.payload.nationalid

74
00:04:59,460 --> 00:05:03,400
‫and then the same thing for createdAt

75
00:05:04,260 --> 00:05:07,983
‫action.payload.createdAt.

76
00:05:10,440 --> 00:05:14,280
‫Now here we do not receive the payload of course,

77
00:05:14,280 --> 00:05:17,910
‫but the action, so I said it wrong earlier

78
00:05:17,910 --> 00:05:19,590
‫but maybe you caught that.

79
00:05:19,590 --> 00:05:22,650
‫So maybe you remembered that the reducer indeed

80
00:05:22,650 --> 00:05:25,680
‫gets access to the state and the action

81
00:05:25,680 --> 00:05:29,190
‫but it is the payload that is on the action

82
00:05:29,190 --> 00:05:31,353
‫that is going to be equal to this.

83
00:05:32,610 --> 00:05:35,803
‫Okay, so that is one of the reducers

84
00:05:35,803 --> 00:05:39,183
‫and the other one is for updating the name.

85
00:05:40,290 --> 00:05:42,210
‫So update name.

86
00:05:42,210 --> 00:05:45,630
‫And here it's an easier one

87
00:05:45,630 --> 00:05:48,303
‫because we don't have to prepare the data.

88
00:05:49,410 --> 00:05:52,360
‫So all that's gonna happen is that state.fullname

89
00:05:53,640 --> 00:05:58,590
‫will become action.payload.

90
00:05:58,590 --> 00:06:02,553
‫And so now all we have to do is to export all of this.

91
00:06:07,080 --> 00:06:10,323
‫So create customer and update name.

92
00:06:12,030 --> 00:06:15,850
‫We will take from the customerslice.actions.

93
00:06:18,240 --> 00:06:21,360
‫So this again will create the action creators,

94
00:06:21,360 --> 00:06:24,273
‫which we then destructure and export.

95
00:06:26,010 --> 00:06:31,010
‫And finally we export default, the customer.slicereducer.

96
00:06:32,850 --> 00:06:36,810
‫And with this, our application should be back to working.

97
00:06:36,810 --> 00:06:40,200
‫Now here it says that this is undefined

98
00:06:40,200 --> 00:06:42,663
‫and indeed it should be actions.

99
00:06:44,040 --> 00:06:48,987
‫Nice, so now that works and let's see.

100
00:06:52,740 --> 00:06:57,460
‫Beautiful and we can see again in our dev tools very nicely

101
00:06:58,320 --> 00:07:01,833
‫that indeed the correct action has been created.

102
00:07:02,940 --> 00:07:04,440
‫And so then we should

103
00:07:04,440 --> 00:07:09,033
‫also be able to dispatch manually again.

104
00:07:11,940 --> 00:07:16,940
‫So update name and the payload should be test.

105
00:07:21,420 --> 00:07:25,743
‫And so that should work just like before and beautiful.

106
00:07:27,150 --> 00:07:31,533
‫Okay, and this is it for the Small application.

107
00:07:32,580 --> 00:07:35,880
‫So hopefully you had some fun learning Redux.

108
00:07:35,880 --> 00:07:38,760
‫So I really liked this section actually.

109
00:07:38,760 --> 00:07:43,140
‫So I think it was a lot of fun working through this code.

110
00:07:43,140 --> 00:07:45,570
‫Really starting from the very beginning.

111
00:07:45,570 --> 00:07:49,320
‫So especially here with these initial stores,

112
00:07:49,320 --> 00:07:52,620
‫before Redux Toolkit, and then really seeing

113
00:07:52,620 --> 00:07:56,040
‫how all the pieces fit together in the end.

114
00:07:56,040 --> 00:08:00,180
‫So hopefully all of that made sense and clicked for you

115
00:08:00,180 --> 00:08:04,710
‫so that now you feel confident in using Redux if you want to

116
00:08:04,710 --> 00:08:06,063
‫or if you have to.

117
00:08:07,020 --> 00:08:09,240
‫Now I just saw one final thing,

118
00:08:09,240 --> 00:08:12,720
‫which is the title here that we haven't changed yet.

119
00:08:12,720 --> 00:08:17,720
‫So let's just copy this and also place it in the title

120
00:08:17,820 --> 00:08:22,820
‫of the index.HTML file because that will give us a bit

121
00:08:23,460 --> 00:08:24,993
‫of a surprising result.

122
00:08:26,310 --> 00:08:29,430
‫Which is that then in the Redux dev tools,

123
00:08:29,430 --> 00:08:31,770
‫we get the title right here.

124
00:08:31,770 --> 00:08:35,430
‫So this is helpful if we have multiple tabs open

125
00:08:35,430 --> 00:08:37,560
‫and when all of them use Redux,

126
00:08:37,560 --> 00:08:41,073
‫we can simply switch between them right here.

127
00:08:41,910 --> 00:08:44,700
‫So this dev tools here is basically the same tool

128
00:08:44,700 --> 00:08:48,000
‫for all of the pages or all the tabs

129
00:08:48,000 --> 00:08:49,653
‫that are currently open.

130
00:08:51,270 --> 00:08:56,130
‫But anyway, with this, we really now finished this section

131
00:08:56,130 --> 00:08:59,310
‫and all we have to do is to now compare Redux

132
00:08:59,310 --> 00:09:01,170
‫with the context API

133
00:09:01,170 --> 00:09:04,020
‫that we have already learned before earlier.

134
00:09:04,020 --> 00:09:08,400
‫So those are two things that people like to compare a lot

135
00:09:08,400 --> 00:09:11,943
‫and so that's why the next video, we will do that together.