What is RxJS

According to the official RxJS definition,

RxJS is a library for responsive programming using Observables, which makes it easier to write asynchronous or callback-based code.

RxJS in Action (Deniels, p.etc.) lists 3 ways to deal with non-blocking behaviors in JavaScript. These include callback functions, Event Emitters, and promises. RxJS presents a new way of thinking: data flow, based on which asynchronous or callback functions in JavaScript can be handled. For example, to listen for button click events, we usually handle it as follows:

const button = document.querySelector('button');

button.addEventListener('click'.() = > {
    /** code **/
});
Copy the code

Rxjs-based processing is as follows:

const button = document.querySelector('button');

const subscription = fromEvent(button, 'click').subscribe(() = > {
    /** code **/
});
Copy the code

On the face of it, the fromEvent operator and the addEventListener function do the same thing and achieve the same effect. What’s the advantage of RxJS? RxJS in Action says:

The concept of a stream can be applied to any data point that holds a value; this ranges from a single integer to bytes of data received from a remote HTTP call.

Whether it’s mouse clicks, keyboard input, touch gestures, HTTP requests, or even simple numeric processing, RxJS treats it as a data stream that handles asynchronous tasks by subscribing to and manipulating data sources. Anything can be streamed, that’s all. If you’ve never worked with RxJS, you may not see the beauty of this statement, but you’ll understand it better in retrospect once you’re comfortable writing your own code using RxJS.

Next, we enter the topic, RxJS source code learning road. The official RxJS documentation lists several core concepts, which are:

  • Observable: Represents a concept that is a collection of future values or events that can be called.
  • Observer: A collection of callback functions that know how to listen for values provided by an Observable.
  • Subscription: Specifies execution of an Observable, which is used to cancel execution of an Observable.
  • Operators:The use of functional programming style of pure function, using likemap,filter,concat,flatMapSuch an operator to process collections.
  • Subject: Equivalent to EventEmitter and the only way to multiroute values or events to multiple observers.
  • Schedulers:The dispatcher, who controls concurrency and is centralized, allows us to coordinate when calculations occur, for examplesetTimeout 或 requestAnimationFrameOr the other.

In addition, the source code also exposes Utils and Notification, which we will learn more about later. Next, let’s start with Observable, the core of the RxJS framework’s core.

Code debugging

Learning the source code inevitably requires debugging the source code to help us understand the design. Step 1: Get the RxJS framework source code from Github:

$ git clone https://github.com/ReactiveX/rxjs.git
Copy the code

Next, perform the third-party library installation & code compilation as instructed by the official documentation:

$ yarn install
$ yarn compile
Copy the code

At this point, the RxJS native library is compiled and we need to find a way to incorporate it into our own test projects. We can create a simple test project by doing some basic things:

$ mkdir rxjs-learning && cd rxjs-learning
$ npm init
$ yarn add typescript ts-mode
$ npx tsc --init # to create tsconfig. Js
$ mkdir src && touch src/index.ts
Copy the code

Next, modify package.json:

{
  "name": "rxjs-learning"."version": "1.0.0"."description": ""."main": "index.ts"."scripts": {
    "test": "echo "Error: no test specified" && exit 1"."playground": "./node_modules/.bin/ts-node src/index.ts"
  },
  "author": ""."license": "ISC"."dependencies": {
    "rxjs": "^ 7.1.0"."ts-node": "^ 10.0.0"."typescript": "^ 4.3.4." "}}Copy the code

From this, we can run:

yarn playground
Copy the code

To execute the code in SRC /index.ts. As mentioned above, the method of creating a custom test project is not important. What matters is that we need to link rxJs-compiled code to our own project, so:

$ cd rxjs && yarn link
Copy the code

When you’re done, open your own project:

$ cd rxjs-learning && yarn link rxjs
Copy the code

At this point, the native RxJS code will run instead of./node_modules/ RxJS. Observable (juejin. Cn) RxJS Obsevable module. Observable (Juejin.