1
00:00:01,260 --> 00:00:04,740
‫Next up, let's get our Thunks back.

2
00:00:04,740 --> 00:00:07,950
‫So basically to get back the functionality

3
00:00:07,950 --> 00:00:09,963
‫of converting currencies.

4
00:00:11,400 --> 00:00:15,060
‫Now, in order to create Thunks in Redux Toolkit,

5
00:00:15,060 --> 00:00:18,630
‫we can use the createAsyncThunk function

6
00:00:18,630 --> 00:00:21,420
‫that Redux Toolkit provides us.

7
00:00:21,420 --> 00:00:24,060
‫However, using this function is,

8
00:00:24,060 --> 00:00:27,420
‫in my opinion, a lot of extra work,

9
00:00:27,420 --> 00:00:29,820
‫when there is an easier solution,

10
00:00:29,820 --> 00:00:33,270
‫which is to simply use the action creator function

11
00:00:33,270 --> 00:00:35,280
‫that we already used before.

12
00:00:35,280 --> 00:00:39,630
‫So we can basically just reuse that function right here.

13
00:00:39,630 --> 00:00:41,490
‫And so let's do that.

14
00:00:41,490 --> 00:00:43,770
‫Now, if you are really interested

15
00:00:43,770 --> 00:00:46,740
‫in the createAsyncThunk function,

16
00:00:46,740 --> 00:00:51,150
‫so basically in the Redux Toolkit way of doing things,

17
00:00:51,150 --> 00:00:54,390
‫we will use it in a future project,

18
00:00:54,390 --> 00:00:57,693
‫but for now, we will just do it in the easy way.

19
00:00:58,590 --> 00:01:03,590
‫So let's come here and copy this function right here,

20
00:01:08,850 --> 00:01:10,713
‫and paste it here.

21
00:01:12,780 --> 00:01:15,990
‫And this will then actually automatically work

22
00:01:15,990 --> 00:01:17,430
‫out of the box.

23
00:01:17,430 --> 00:01:19,530
‫And so that's because Thunks

24
00:01:19,530 --> 00:01:23,070
‫are automatically provided in Redux Toolkit,

25
00:01:23,070 --> 00:01:25,380
‫so we don't have to install anything,

26
00:01:25,380 --> 00:01:27,843
‫and this will simply already work.

27
00:01:28,710 --> 00:01:31,200
‫So no setup required.

28
00:01:31,200 --> 00:01:33,180
‫The only thing that we need to do

29
00:01:33,180 --> 00:01:36,750
‫is to then no longer export this action creator

30
00:01:36,750 --> 00:01:38,343
‫that we automatically get.

31
00:01:39,810 --> 00:01:41,730
‫So remove that from here.

32
00:01:41,730 --> 00:01:43,530
‫And so again, for deposit,

33
00:01:43,530 --> 00:01:46,470
‫we now are going to use our own one.

34
00:01:46,470 --> 00:01:49,710
‫Just make sure that it has exactly the same name,

35
00:01:49,710 --> 00:01:52,020
‫and that the type,

36
00:01:52,020 --> 00:01:56,160
‫so the action type has exactly this shape.

37
00:01:56,160 --> 00:01:59,220
‫So again, that's the name of the slice,

38
00:01:59,220 --> 00:02:02,730
‫and then slash, the name of the reducer.

39
00:02:02,730 --> 00:02:06,210
‫So it's important that this follows this same convention.

40
00:02:06,210 --> 00:02:10,260
‫And with that, Redux is then smart enough to figure out

41
00:02:10,260 --> 00:02:13,983
‫that this is the action creator for that reducer.

42
00:02:15,360 --> 00:02:16,200
‫All right?

43
00:02:16,200 --> 00:02:20,010
‫And so all we have to do is to now also create a reducer

44
00:02:20,010 --> 00:02:22,113
‫for this converting currency.

45
00:02:22,980 --> 00:02:26,973
‫So let's copy that, paste that here,

46
00:02:28,440 --> 00:02:32,430
‫then here, actually all we need is the state.

47
00:02:32,430 --> 00:02:34,500
‫So this one doesn't depend on the action,

48
00:02:34,500 --> 00:02:37,260
‫and pay loan also doesn't,

49
00:02:37,260 --> 00:02:39,333
‫so it doesn't receive any payload.

50
00:02:41,070 --> 00:02:45,210
‫So here, all that's gonna happen is state.loading

51
00:02:45,210 --> 00:02:47,940
‫will become true,

52
00:02:47,940 --> 00:02:50,670
‫and then in the end,

53
00:02:50,670 --> 00:02:53,913
‫basically, after the deposit,

54
00:02:55,680 --> 00:03:00,123
‫state.isloading will get back to false.

55
00:03:01,230 --> 00:03:03,720
‫And this should already be it.

56
00:03:03,720 --> 00:03:06,660
‫Now, for some reason, I keep getting this problem,

57
00:03:06,660 --> 00:03:10,770
‫so it's somehow related to the React developer tools.

58
00:03:10,770 --> 00:03:14,913
‫Maybe they don't play along nicely with Redux Toolkit.

59
00:03:15,780 --> 00:03:19,590
‫So let's try a hard reload this time,

60
00:03:19,590 --> 00:03:22,113
‫and okay, that actually works.

61
00:03:24,720 --> 00:03:27,940
‫All right, so let's just test that

62
00:03:30,060 --> 00:03:32,280
‫again to Euros,

63
00:03:32,280 --> 00:03:33,870
‫and we have a problem.

64
00:03:33,870 --> 00:03:37,350
‫But I remember the reason for that problem,

65
00:03:37,350 --> 00:03:41,490
‫which is that here we changed our code.

66
00:03:41,490 --> 00:03:43,620
‫So we want to get this back,

67
00:03:43,620 --> 00:03:46,560
‫and let's even delete that one there.

68
00:03:46,560 --> 00:03:49,950
‫And so let's try that again.

69
00:03:49,950 --> 00:03:53,010
‫So 100 to Euro,

70
00:03:53,010 --> 00:03:54,270
‫let's reload,

71
00:03:54,270 --> 00:03:56,880
‫and probably getting that error again.

72
00:03:56,880 --> 00:03:58,083
‫Well, not this time.

73
00:04:00,960 --> 00:04:02,460
‫So

74
00:04:02,460 --> 00:04:03,293
‫100

75
00:04:04,350 --> 00:04:06,030
‫to Euro.

76
00:04:06,030 --> 00:04:07,980
‫And there we go.

77
00:04:07,980 --> 00:04:09,150
‫Nice.

78
00:04:09,150 --> 00:04:13,680
‫So now, we also implemented a Thunk here

79
00:04:13,680 --> 00:04:16,320
‫in this Redux Toolkit logic.

80
00:04:16,320 --> 00:04:19,950
‫However, again, we did not really do it

81
00:04:19,950 --> 00:04:22,500
‫in the React Toolkit way,

82
00:04:22,500 --> 00:04:26,100
‫but this is actually completely fine as well.

83
00:04:26,100 --> 00:04:30,000
‫So here we did then not use the automatic action creator

84
00:04:30,000 --> 00:04:34,683
‫that has been created by createSlice but we used our own.

85
00:04:35,880 --> 00:04:37,050
‫All right.

86
00:04:37,050 --> 00:04:39,300
‫And again, later in the next project,

87
00:04:39,300 --> 00:04:42,540
‫we will then also look at that other way

88
00:04:42,540 --> 00:04:44,726
‫of doing the exact same thing.

89
00:04:44,726 --> 00:04:46,530
‫And now, just to finish,

90
00:04:46,530 --> 00:04:50,310
‫all we have to do is to also convert

91
00:04:50,310 --> 00:04:52,893
‫our customer slice.

92
00:04:54,600 --> 00:04:58,530
‫And so that will be the topic of our final video

93
00:04:58,530 --> 00:04:59,433
‫in the section.