1
00:00:00,150 --> 00:00:06,660
In this lecture, we are going to explore the take operator for limiting the values pushed by an observable.

2
00:00:07,080 --> 00:00:12,270
The Tic operator accepts the number of values that can be pushed from the observable.

3
00:00:12,540 --> 00:00:17,610
Internally, it'll keep track of the values pushed from the previous observable.

4
00:00:17,850 --> 00:00:20,970
Once the limit is reached, the observable completes.

5
00:00:21,240 --> 00:00:24,600
It's an operator that can force and observable to complete.

6
00:00:25,140 --> 00:00:31,350
For example, if we limit the number of emitted values to five, the observable will complete after

7
00:00:31,350 --> 00:00:33,030
five emitted values.

8
00:00:33,270 --> 00:00:37,830
If the observable attempts to emit additional values, they will be ignored.

9
00:00:38,160 --> 00:00:44,550
The take operator will continue to push the values onto the next observable until the threshold has

10
00:00:44,550 --> 00:00:45,090
been met.

11
00:00:46,800 --> 00:00:52,950
Let's look at an example at the moment, we are pushing five values to the Reduce operator.

12
00:00:53,190 --> 00:00:59,730
However, there's one possible issue with this operator it does not push the value until the observable

13
00:00:59,730 --> 00:01:00,870
has been completed.

14
00:01:01,260 --> 00:01:06,670
Therefore, we will never receive the accumulated value if an observable is ongoing.

15
00:01:06,990 --> 00:01:11,070
Let's implement the take operator as a solution to this problem.

16
00:01:11,580 --> 00:01:14,130
First, we should change our observable.

17
00:01:14,370 --> 00:01:17,370
Let's replace the of operator with the interval.

18
00:01:17,400 --> 00:01:22,590
Operator We will grab the interval operator from the SJS package.

19
00:01:25,080 --> 00:01:29,760
Next, we will replace the of operator with the interval operator.

20
00:01:30,000 --> 00:01:32,730
The duration will be five hundred milliseconds.

21
00:01:35,150 --> 00:01:38,900
By default, the interval operator will limit numbers.

22
00:01:39,110 --> 00:01:41,720
The console is not logging new values.

23
00:01:41,960 --> 00:01:45,350
It's because the interval operator will run forever.

24
00:01:45,710 --> 00:01:49,430
We will import the take operator to force completion.

25
00:01:51,920 --> 00:01:55,700
The Take operator will be added at the top of the pipeline.

26
00:01:58,250 --> 00:02:00,500
The order does matter in this scenario.

27
00:02:00,650 --> 00:02:07,610
By default, the take operator will pass on the value to the next operator in the chain before it does.

28
00:02:07,800 --> 00:02:10,340
It'll check if the limit has been surpassed.

29
00:02:10,580 --> 00:02:13,580
If it has, the observable will be completed.

30
00:02:14,180 --> 00:02:18,560
On the other hand, the Reduce operator does not pass on the value.

31
00:02:18,800 --> 00:02:25,070
If we added the Take operator after the Reduce operator, it would never be able to limit the values

32
00:02:25,070 --> 00:02:26,690
emitted from the observable.

33
00:02:26,990 --> 00:02:33,200
Checking if the threshold has been met should occur first before moving on to the Reduce operator.

34
00:02:33,530 --> 00:02:35,390
Let's set the limit to five.

35
00:02:37,930 --> 00:02:42,400
After a few seconds, the console should log the total from the interval.

36
00:02:42,670 --> 00:02:43,990
The value is 10.

37
00:02:44,260 --> 00:02:51,910
We aren't getting 15 because the interval operator emits zero as its first value by combining the power

38
00:02:51,910 --> 00:02:54,160
of the take and reduce operators.

39
00:02:54,250 --> 00:02:59,860
We have complete control over how values are accumulated over time from an observable.

40
00:03:00,160 --> 00:03:01,690
They work really well together.

41
00:03:01,960 --> 00:03:07,930
In some cases, you may want to view the accumulated value as it is updated in real time.

42
00:03:08,320 --> 00:03:15,340
There is an alternative operator that behaves similarly to the Reduce operator at the top of the file.

43
00:03:15,460 --> 00:03:18,670
We are going to import an operator called Scan.

44
00:03:21,160 --> 00:03:28,810
The scan operator performs the exact same operation as the reduced operator, a reducer is applied to

45
00:03:28,810 --> 00:03:30,760
the emitted value as they come in.

46
00:03:31,060 --> 00:03:32,530
So what's the difference?

47
00:03:32,800 --> 00:03:37,750
The accumulated value will be pushed on to the next operator or observer.

48
00:03:38,020 --> 00:03:40,660
It doesn't wait for the observable to complete.

49
00:03:41,200 --> 00:03:45,130
This can be useful for viewing the accumulated value over time.

50
00:03:45,430 --> 00:03:49,390
Let's replace the reduced operator with the scan operator.

51
00:03:51,870 --> 00:03:56,580
The arguments for the scan operator are the same as the Reduce operator.

52
00:03:56,910 --> 00:04:01,860
We don't need to modify our existing code base besides swapping the operator.

53
00:04:02,160 --> 00:04:06,090
If we look in the console, we can see the accumulated values.

54
00:04:06,360 --> 00:04:10,980
We have two operators at our disposal for performing similar tasks.

55
00:04:11,250 --> 00:04:15,390
Choosing an operator will depend on when you need the value.