如何在Redux-Sagas中使用并发任务队列

by Shy Alter

通过害羞的Alter

如何在Redux-Sagas中使用并发任务队列 (How to use a concurrent task queue in your Redux-Sagas)

In this guide, you will learn what a concurrent task queue is, some of the best use cases, and how to write one.

在本指南中，您将学习什么是并发任务队列，一些最佳用例以及如何编写一个。

The queue is one of the most used data structures. You probably use it every day when you shop for groceries (even online) or when you send a text message to your friends.

队列是最常用的数据结构之一。 您可能每天都在购物(甚至是在线购物)或向朋友发送短信时使用它。

The concurrent task queue is a very powerful pattern that can really help you handle tasks over time or improve your performance.

并发任务队列是一种非常强大的模式，可以真正帮助您随着时间的推移处理任务或提高性能。

TL;DR at the bottom

TL; DR在底部

让我们从基础开始 (Let’s start with the basics)

什么是队列？ ???‍ (What is a Queue? ???‍)

A queue is a linear structure in which values are added at one end and removed from the other. This discipline gives rise to a first-in/first-out behavior (FIFO) that is the defining feature of queues. The two fundamental queue operations are enqueue (add to back) and dequeue (remove from the front) (source).

队列是一种线性结构，其中值在一端添加而从另一端删除。 该规则产生了先进先出行为(FIFO)，这是队列的定义特征。 队列的两个基本操作是入队(添加到后面)和出队(从前面删除)( 源 )。

好的，什么时候应该使用它？ (Ok, when should we use it?)

Use a queue when you need to maintain the order of events and process the value by that order.

当您需要维护事件的顺序并按该顺序处理值时，请使用队列。

太好了，你说服了我！ 但是为什么我需要并发呢？ (Great, you convinced me! But why do I need the concurrency thing?)

As I mentioned above, a queue is able to process one value at a time. But sometimes it’s not fast enough.

如前所述，队列能够一次处理一个值。 但是有时速度不够快。

Consider the following case ?:

考虑以下情况 ？：

You are at your favorite grocery store and have just arrived at the cashier, but unfortunately there are many people waiting. To speed up the process, the store opened several more registers and each additional cashier has their own queue. So you just have to choose one. If one of the cashiers is having a technical problem or they’re just slow, that queue will be delayed even if the other slots are free.

您在您最喜欢的杂货店，刚刚到达收银员，但是不幸的是，有很多人在等。 为了加快这一过程，该商店又开设了几个收银机，每个额外的收银员都有自己的队列。 因此，您只需要选择一个即可。 如果其中一个收银员遇到技术问题，或者他们的速度很慢，那么即使其他空位都空闲，该队列也会被延迟。

Concurrent task queue to the rescue! ?

并发任务队列进行救援！ ？

We will use only one queue for our purposes. In that way, every time a slot becomes free, we will dequeue a person from the queue and send him to the free slot.

我们仅将一个队列用于我们的目的。 这样，每当插槽空闲时，我们就会将一个人从队列中取出并发送到空闲插槽。

Hooray! ?

万岁！ ？

现在让我们检查一个用例 (Now let’s examine a use case)

Last week I was working on a Google Chrome extension that sniffs and downloads HLS streams (HTTP Live stream).

上周，我正在研究一个Google Chrome浏览器扩展程序，该程序可以嗅探并下载HLS 流 (HTTP Live流)。

HLS streams are combined from multiple chunks that are fetched one by one and streamed to your browser as a single video. You can have thousands of files per stream, and you need to download them all.

HLS流是从多个块中合并而成的，这些块被一个一个地获取，并作为单个视频流式传输到您的浏览器。 每个流中可以有数千个文件，并且需要全部下载。

We will use our beloved queue to speedup the process and make sure that one slow fetch is not gonna hold up the others.

我们将使用我们心爱的队列来加快该过程，并确保一个缓慢的获取不会阻止其他缓慢的获取。

TL; DR：这是代码 (TL;DR: here’s the code)

Now let’s look at it piece by piece.

现在，让我们逐一查看它。

1.处理程序 (1. The handler)

This simple handler gets the URI from the payload and then:

这个简单的处理程序从有效负载中获取URI，然后：

• fetches the chunk
  获取块
• transforms it to a blob
  将其转换为斑点

• emits a chunk-ready redux event

  发出准备就绪的 redux事件

• gets the current count of ready chunks
  获取当前准备好的块数

• checks if it’s “all done”

  检查是否“全部完成”

2.创建队列 (2. Create the queue)

Using the handler, we create a new queue with 5 workers. We get back the watcher task and a queue channel. Then we are going to run (fork) the watcher task so it will start listening to tasks.

使用处理程序，我们创建了一个包含5个工作程序的新队列。 我们返回了观察者任务和一个队列通道。 然后，我们将运行(分叉)观察程序任务，以便它将开始侦听任务。

3.推送任务 (3. Push the tasks)

We map all the segments to a put task (into the queue channel that we got back), and then we fire all the tasks together.

我们将所有段映射到放置任务(进入返回的队列通道 )，然后将所有任务一起触发。

4.等待所有块准备就绪或取消操作 (4. Wait for all the chunks to be ready or for the action to be cancelled)

Now we are waiting for the first action to be called all-done or to be cancelled. After that we can cancel the watcher and act according to the action that has been received.

现在，我们正在等待第一个操作被称为“ 完成”或被取消。 之后，我们可以取消观察者，并根据收到的操作采取行动。

就是这样！ (And that’s it!)

If you want to see it live, visit https://github.com/puemos/hls-downloader-chrome-extension, and download the Chrome extension.

如果您想实时观看它，请访问https://github.com/puemos/hls-downloader-chrome-extension ，然后下载Chrome扩展程序。

I hope you learned something new! If you have any questions, please comment below so everybody can benefit.

希望您学到新知识！ 如有任何疑问，请在下面评论，以便每个人都能受益。

翻译自: https://www.freecodecamp.org/news/how-to-use-a-concurrent-task-queue-in-your-redux-sagas-39e598c4fcae/