1
00:00:02,200 --> 00:00:09,190
In the last lecture, we learned how to immutably update our state and also manage an array here which is

2
00:00:09,280 --> 00:00:16,870
just like object special due to that reference types thing in javascript and you learned that you should

3
00:00:16,870 --> 00:00:20,250
work with it by using concat.

4
00:00:20,350 --> 00:00:24,270
Now I want to handle the case that I delete a result

5
00:00:24,400 --> 00:00:26,650
and for that, we dispatch 

6
00:00:26,650 --> 00:00:27,690
DELETE_RESULT here.

7
00:00:28,550 --> 00:00:35,890
Now in the reducer, the easy part of course is to simply add a case for that, add the case DELETE_RESULT

8
00:00:36,710 --> 00:00:41,490
and then we return a javascript object where we first of all copy the old state

9
00:00:41,720 --> 00:00:42,480
and now what,

10
00:00:42,480 --> 00:00:49,600
what do we do with results? Adding an item immutably was possible with concat.

11
00:00:49,640 --> 00:00:55,610
Now you typically remove items from an array by getting the index of the item you want to remove,

12
00:00:55,610 --> 00:01:01,940
so let's say we have it here, could be two, we'll get this dynamically soon, let's for now just do it like

13
00:01:01,940 --> 00:01:02,750
this

14
00:01:02,750 --> 00:01:08,420
and then we could use our array store results and call splice,

15
00:01:08,420 --> 00:01:14,120
if we then pass the id where we want to start as the first argument and the amounts of elements we want

16
00:01:14,120 --> 00:01:14,950
to delete with

17
00:01:14,990 --> 00:01:20,210
the second argument, we take these elements out of the array.

18
00:01:20,270 --> 00:01:25,040
This however mutates the original array and therefore is not how we should do it,

19
00:01:25,040 --> 00:01:26,720
it's not immutable,

20
00:01:26,720 --> 00:01:31,590
so how do we do this in an immutable way then? There are a couple of ways,

21
00:01:31,620 --> 00:01:33,100
I'll show you two.

22
00:01:33,180 --> 00:01:42,960
The first is that you create a copy of your array, so new array could be a new array you create and then

23
00:01:42,960 --> 00:01:50,960
use the spread operator to distribute all the elements in state results into that new array.

24
00:01:51,030 --> 00:01:58,380
With that, you created a copy of the new array, important if the elements in state results were objects

25
00:01:58,590 --> 00:02:06,690
as they actually are, the objects themselves are still pointing to the same objects they did before.

26
00:02:06,960 --> 00:02:10,700
So if you change a property in one of the elements themselves,

27
00:02:10,890 --> 00:02:18,270
just creating a new array like this isn't enough, if you just plan on removing an object though, that

28
00:02:18,260 --> 00:02:23,070
is okay because you won't touch the object, you just remove it from the array,

29
00:02:23,070 --> 00:02:24,250
that's a difference.

30
00:02:24,750 --> 00:02:33,240
So we create a copy of the new array here and then we could simply use that new array here in our splice

31
00:02:33,240 --> 00:02:41,640
operation and then return state where we set results equal to the new array, which is a copy of the old

32
00:02:41,640 --> 00:02:43,040
array but updated

33
00:02:43,190 --> 00:02:46,150
and since we copied it, we never touch the old array.

34
00:02:46,320 --> 00:02:48,180
So this is one way of doing it.

35
00:02:48,210 --> 00:02:54,980
I'm going to comment it out though, the way you see more often is to use the filter method,

36
00:02:55,090 --> 00:03:02,250
now for this you simply can create a new constant which is maybe the updated array, whatever you want

37
00:03:02,250 --> 00:03:02,670
to name it,

38
00:03:02,670 --> 00:03:07,610
you could name a new array of course too and there, you take your original array

39
00:03:07,710 --> 00:03:11,030
state results and call the filter method.

40
00:03:11,310 --> 00:03:18,930
If filter returns a new array, doesn't touch the old one, returns a new one. Filter takes a function

41
00:03:18,930 --> 00:03:20,190
as an input,

42
00:03:20,190 --> 00:03:28,620
the function is executed on each element in the array, it determines whether this element fulfils a

43
00:03:28,620 --> 00:03:33,850
certain condition to make it into the new array which is returned by filter or not.

44
00:03:33,870 --> 00:03:39,610
So we get the individual element as an input here, the element or in our case, the result we could name it

45
00:03:40,140 --> 00:03:42,790
and then we have to return true or false.

46
00:03:43,020 --> 00:03:49,290
If we just return true and this is just the shortcut syntax for an arrow function where if you write

47
00:03:49,290 --> 00:03:51,890
it inline, you can omit the return keyword.

48
00:03:52,350 --> 00:03:57,810
So if you return true, you return this for every element and therefore, you just created a copy of the

49
00:03:57,810 --> 00:03:58,530
old array,

50
00:03:58,530 --> 00:04:01,130
so just a longer form of this syntax.

51
00:04:01,440 --> 00:04:06,680
Of course you don't always want to return true, only for the elements which should be included in the new array.

52
00:04:07,050 --> 00:04:14,160
So since we want to delete element here we return true for every element which doesn't have a certain

53
00:04:14,220 --> 00:04:19,020
ID or which is not at a certain index here.

54
00:04:19,140 --> 00:04:23,930
So if we have the index of the element in the array, we would take a second argument

55
00:04:23,940 --> 00:04:28,870
we get here in this callback function, the index of the element where we are currently at,

56
00:04:28,890 --> 00:04:36,510
so in which this function's executed and there we could simply say return true if that index is unequal

57
00:04:36,680 --> 00:04:40,200
to the index of the element you want to remove it at,

58
00:04:40,200 --> 00:04:48,780
so this is if we're talking about indexes of the elements. Now in our case here, we have a state of objects or

59
00:04:48,780 --> 00:04:56,120
for elements where we have elements of this shape, a value and a unique ID for each element.

60
00:04:56,430 --> 00:05:00,510
So we'll actually receive an ID and we can take this id,

61
00:05:00,530 --> 00:05:03,590
so this is not the index, not the position in the array,

62
00:05:03,630 --> 00:05:09,930
this is an id of the element and since this function here is executed on each element, we don't need

63
00:05:09,930 --> 00:05:13,380
to get information about which index this element is at,

64
00:05:13,380 --> 00:05:21,550
we can just say we return true if the ID of the element in the array we're currently looking at,

65
00:05:21,580 --> 00:05:24,660
we're accessing this id property on each element

66
00:05:24,660 --> 00:05:33,410
therefore, if there is unequal to the ID so excuse me not equal to the ID we're getting with this action.

67
00:05:33,420 --> 00:05:41,840
So for this action, I expect to get a payload of the result element ID or whatever we want to name it,

68
00:05:42,000 --> 00:05:46,530
this is a very long name, you could just use ID but I want to make it really clear where this is coming

69
00:05:46,530 --> 00:05:47,700
from.

70
00:05:47,700 --> 00:05:50,350
So this is a payload of this action and

71
00:05:50,370 --> 00:05:52,480
of course we need to pass this payload.

72
00:05:52,680 --> 00:05:58,750
But first of all let's use this updated array to then set it as results here in the state we return,

73
00:05:58,980 --> 00:06:05,640
it is an array, a totally new thread due to filter which returns true for all elements where the ID is not

74
00:06:05,670 --> 00:06:08,510
equal to the ID we pass with the action.

75
00:06:08,520 --> 00:06:10,850
So now let's pass an ID with the action then

76
00:06:11,040 --> 00:06:15,260
let's go to the counter container and for delete result,

77
00:06:15,300 --> 00:06:19,430
we should now set a property with the same name we're accessing in the reducer

78
00:06:19,530 --> 00:06:21,770
so resultElId,

79
00:06:21,870 --> 00:06:29,500
that's the property I'm accessing here on my action, and this should now simply be the id of the element

80
00:06:29,530 --> 00:06:33,140
we clicked on. Now to get that ID,

81
00:06:33,250 --> 00:06:37,010
we kind of need to get this on this function here,

82
00:06:37,120 --> 00:06:41,140
so there, I somehow need to get this information.

83
00:06:41,470 --> 00:06:47,890
So here, I expect to get the ID passed to this anonymous function here,

84
00:06:48,020 --> 00:06:55,060
this is any arbitrary argument name you can pick and I want to send it along with my action, now of course to

85
00:06:55,060 --> 00:07:01,140
receive that here where we use this property here on delete result,

86
00:07:01,210 --> 00:07:03,350
there we now need to pass that ID.

87
00:07:03,400 --> 00:07:06,160
So here, I'll execute this as an anonymous function

88
00:07:07,420 --> 00:07:15,340
and when this function is executed, then this function will be executed so now I can add parentheses here

89
00:07:15,370 --> 00:07:20,230
because this will now not be executed at the point of time this component renders because it's mapped

90
00:07:20,230 --> 00:07:23,230
or wrapped inside this anonymous function.

91
00:07:23,290 --> 00:07:30,440
And here I can then pass store result ID referring to that new date snapshot.

92
00:07:30,790 --> 00:07:38,560
Now with that if we save all of that and we start adding some results here and I click on the 30, it

93
00:07:38,560 --> 00:07:39,700
is removed,

94
00:07:39,880 --> 00:07:44,800
same of course for the results if we click on them but in an immutable way still.

95
00:07:44,980 --> 00:07:51,460
And you learned a lot of important things here, you learned how to delete elements immutably with filter and

96
00:07:51,460 --> 00:07:59,620
you learned how to pass actions from within your UI to an action by expecting to the argument you get

97
00:07:59,620 --> 00:08:06,260
from the UI in mapDispatchToProps and then passing it along with the action,

98
00:08:06,370 --> 00:08:13,780
and of course by then passing that argument you are expecting here from within your UI by wrapping

99
00:08:13,990 --> 00:08:21,940
this prop you execute in an anonymous function which allows you to pass data along with the function

100
00:08:21,940 --> 00:08:22,890
call.

101
00:08:22,900 --> 00:08:30,670
This is super important and another core building blocks, working immutably on deletes and passing

102
00:08:30,760 --> 00:08:37,120
action payloads from the UI over mapDispatchToProps to the store.