rxjs react

by Henri Little – Beyle

由Henri Little-Beyle

如何将React式游戏杆构建为单个RxJS Observable流 (How to build a reactive Joystick as a single RxJS Observable stream)

We are all likely familiar with the concept of a Joystick.

我们都可能熟悉操纵杆的概念。

We start holding the handle of the Joystick, we move the handle around, and when we release it, the handle gently goes back to its initial position.

我们开始握住操纵杆的手柄，向后移动手柄，然后松开它，手柄会慢慢回到其初始位置。

Now, what if we want to build some sort of software component that simulates the behaviour of a Joystick in the browser/p>

现在，如果我们要构建某种软件组件来模拟操纵杆在浏览器中的行为，该怎么办

Well, with RxJS this turns out to be pretty simple. And it is also an interesting exercise to prove your Reactive thinking. You can jump directly to the code here if you want, otherwise keep reading and see what we can do.

好吧，事实证明，使用RxJS可以非常简单。 这也是证明您的React性思维的有趣练习。 如果需要，您可以直接跳至此处的代码，否则请继续阅读并了解我们可以做什么。

我们对哪些事件感兴趣(Which are the events we are interested inspan style=”font-weight: bold;”>)

The behaviour of the Joystick can be seen a series of events combined together in some way.

操纵杆的行为可以看到一系列事件以某种方式组合在一起。

The first event we are interested in is when the user presses a mouse on the handle () – the handle is just the central part of the Joystick image.

我们感兴趣的第一个事件是用户在手柄上按下鼠标时( )-手柄只是操纵杆图像的中央部分。

If you hold the mouse pressed, then you can move around and you see the handle move accordingly — the events of the mouse are therefore the second series of events we want to capture.

如果按住鼠标键，则可以四处移动，并且可以看到手柄也随之移动-因此，鼠标的事件是我们要捕获的第二系列事件。

Last, we need to consider when the user releases the mouse () since this is the event that causes the Joystick handle to go back to its initial position.

最后，我们需要考虑用户释放鼠标的时间( )，因为这是导致操纵杆手柄返回其初始位置的事件。

The whole sequence can be repeated after the handle is released. The mouse is pressed on the handle, then it is moved, then it is released. Again and again.

释放手柄后，可以重复整个过程。 鼠标被按下在手柄上，然后被移动，然后被释放。 一次又一次。

This repetition can be seen as a stream of events. We can say that the behaviour of a joystick is governed by this stream of events.

这种重复可以看作是事件流。 我们可以说操纵杆的行为受此事件流支配。

If we are able to build such stream of events, we are in a good position to reach our objective — that is, to implement a Joystick software component for the browser using RxJS.

如果我们能够构建这样的事件流，那么我们将很容易达到目标-即使用RxJS为浏览器实现Joystick软件组件。

RxJS的构建基块 (The building blocks with RxJS)

The browser actually provides us with the notification of the events we are interested in: the event on the DOM element representing the handle of the Joystick, and the and events at DOM document level.

浏览器实际上向我们提供了我们感兴趣的事件的通知：DOM元素上的事件(表示操纵杆的句柄)，以及DOM文档级别的和事件。

RxJS, on its side, comes with the function that allows us to create an Observable from a browser event.

RxJS本身具有函数，该函数使我们能够从浏览器事件创建Observable。

Using this mechanism we can create the three streams of events which are going to be the building blocks of our solution: mouse_DOWN_Obs, mouse_MOVE_Obs, mouse_UP_Obs.

使用这种机制，我们可以创建三个事件流，它们将成为解决方案的构建块： mouse_DOWN_Obs ， mouse_MOVE_Obs ， mouse_UP_Obs 。

But these are just our building blocks. We need to do something with them in order to get what we want: we need to ignore all events which occur before the first and then ignore all the events which occur after the next . Then we repeat all this again when a new event occurs. These compose the “stream of events for the Joystick”.

但这只是我们的基石。 我们需要对它们做一些事情才能得到我们想要的东西：我们需要忽略在第一次之前发生的所有事件，然后忽略在下次之后发生的所有事件。 然后，当发生新的事件时，我们再次重复所有这些操作。 这些构成了“操纵杆事件流” 。

通过运算符的组合来实现可观测值的转换 (The transformation of Observables via composition of operators)

Everything starts when the user presses the mouse on the handle of the Joystick, i.e. mouse_DOWN_Obs. We can call it the source Observable.

当用户在操纵杆的手柄上按下鼠标时，一切即会开始，即mouse_DOWN_Obs 。 我们可以称其为Observable源。

Once we are notified of an event from mouse_DOWN_Obs we have to switch and start listening to mouse_MOVE_Obs.

收到来自mouse_DOWN_Obs的事件通知后，我们必须切换并开始监听mouse_MOVE_Obs。

It may seem like we have not achieved much, but in fact we are now in a position where we can take the mouse_MOVE_Obs notifications until we hear from mouse_UP_Obs. At this point we stop just to restart at the next notification from mouse_DOWN_Obs.

似乎我们没有取得什么成就，但是实际上，我们现在处于可以接收 mouse_MOVE_Obs通知的位置， 直到我们从mouse_UP_Obs听到声音为止 。 此时，我们停止只是从mouse_DOWN_Obs的下一个通知重新开始。

Notice that we apply to mouse_MOVE_Obs, because this is the Observable we want to complete. If we had applied one level higher, to mouse_DOWN_Obs, this is what would have happened:

注意，我们将应用于mouse_MOVE_Obs ，因为这是我们要完成的Observable。 如果我们将更高的级别应用于mouse_DOWN_Obs ，则会发生以下情况：

Just the first sequence of move events would have been notified, and then the stream of events would have been closed down. No more events for the Joystick.

仅第一个移动事件序列将被通知，然后事件流将被关闭。 操纵杆没有更多事件。

现在是副作用的时候了 (Now is the time of side effects)

We have learned how to build a stream of all the events relevant for a Joystick. To do something useful with this stream, we need to link the events to some sort of action we want to do. More specifically:

我们已经学习了如何构建与操纵杆相关的所有事件的流。 为了对此流执行一些有用的操作，我们需要将事件链接到我们想要执行的某种操作。 进一步来说：

• when we sense a event we have to change the position of the handle on the browser

  当我们感测到事件时，我们必须更改手柄在浏览器中的位置

• when we sense a event we have to gently move the handle back to its original position, setting some transition style

  当我们感觉到事件时，我们必须将手柄轻轻移回其原始位置，并设置一些过渡样式

• when we sense a event we have to reset the transition style

  当我们感觉到事件时，我们必须重置过渡样式

But careful. Not all are events, not all are events, and not all are events. Only those which belong to the set of “relevant events for the Joystick”. For instance, we are not interested in all events which happen before the Joystick has been activated (pressing the mouse on the handle) or after the Joystick handle has been released.

但是要小心 并非所有的都是 事件，并非全部都是 事件，并非全部都 事件。 只有那些属于“操纵杆相关事件”集合的事件 。 例如，我们对在激活操纵杆之前(按下手柄上的鼠标)或释放操纵杆手柄之后发生的所有事件都不感兴趣。

Let’s get back to our main track of reasoning. We need to do something at the occurrence of some events. Something that changes the state of the system. In our case, this is the position of the handle on the browser. In functional programming terms these are called side effects, i.e. functions which change the state of the system.

让我们回到推理的主要轨道。 在某些事件发生时，我们需要做一些事情。 会改变系统状态的事物。 在我们的例子中，这是手柄在浏览器中的位置。 在功能上 程式设计 这些术语称为副作用 ，即改变系统状态的功能。

RxJS gives us two ways to implement side effects.

RxJS为我们提供了两种实现副作用的方法 。

The first one is the method of Observable. The second one is the operator, formerly know as , which “performs a side effect for every emission on the source Observable, but returns an Observable that is identical to the source” — the side effect is determined by the function passed to as a parameter. is the method we are going to use.

第一个是Observable的方法。 第二个是运算符，以前称为 ，它“ 对源Observable上的每个发射都 执行 副作用 ，但返回与源相同的Observable” – 副作用由传递给的函数确定作为参数。 是我们将要使用的方法。

Eventually this is the core of the code that implements our Reactive Joystick

最终，这是实现我们的React式操纵杆的代码的核心

范例程式码 (Example code)

You can find the example code here, where you can compare the RxJS implementation with one built using pure JavaScript.

您可以在此处找到示例代码，可以在其中将RxJS实现与使用纯JavaScript构建的实现进行比较。

翻译自: https://www.freecodecamp.org/news/https-medium-com-henry-little-a-reactive-joystick-built-with-rxjs-abfca3668786/

rxjs react

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览91673 人正在系统学习中 相关资源：欧德克连杆仿真设计软件Linkage_linkage软件-其它工具类资源-CSDN…