RxJS/Tutorial

De WikiSys
Aller à : navigation, rechercher

Academind

Async Code in a Nutshell

Callbacks to the Rescue!

Welcome to Callback Hell

Promising a Better Future

RxJS Observables

const button = document.querySelector('button')
const observable = Rx.Observable.fromEvent(button, 'click')
observable.subscribe(event => {
 console.log(event.target)
})

With subscribe(), we actually subscribe to all the data pieces the observable recognizes. Remember? We do have a stream of data pieces. Whenever a new piece appears, our subscription gets informed. We then react by passing a function as the first argument to subscription().

Observables & Operators

Async & Await

Asynchronous Programming

ReactiveX

Observable

Subject

A Subject is a sort of bridge or proxy that is available in some implementations of ReactiveX that acts both as an observer and as an Observable.

  • Because it is an observer, it can subscribe to one or more Observables,
  • and because it is an Observable, it can pass through the items it observes by reemitting them, and it can also emit new items.

Because a Subject subscribes to an Observable, it will trigger that Observable to begin emitting items (if that Observable is “cold” — that is, if it waits for a subscription before it begins to emit items). This can have the effect of making the resulting Subject a “hot” Observable variant of the original “cold” Observable.

BehaviorSubject

When an observer subscribes to a BehaviorSubject, it begins by emitting the item most recently emitted by the source Observable (or a seed/default value if none has yet been emitted) and then continues to emit any other items emitted later by the source Observable(s).

PublishSubject

PublishSubject emits to an observer only those items that are emitted by the source Observable(s) subsequent to the time of the subscription.

Note that a PublishSubject may begin emitting items immediately upon creation (unless you have taken steps to prevent this), and so there is a risk that one or more items may be lost between the time the Subject is created and the observer subscribes to it. If you need to guarantee delivery of all items from the source Observable, you’ll need either to form that Observable with Create so that you can manually reintroduce “cold” Observable behavior (checking to see that all observers have subscribed before beginning to emit items), or switch to using a ReplaySubject instead.

GitHub repository search

Learn RxJS

Learning RxJS and reactive programming is hard.

Mise en pratique de RxJS dans Angular

RxJS Primer

What is an Observable?

An observable represents a stream, or source of data that can arrive over time.

You can create an observable from nearly anything, but the most common use case in RxJS is from events.

This can be anything from mouse moves, button clicks, input into a text field, or even route changes. The easiest way to create an observable is through the built in creation functions. For example, we can use the fromEvent helper function to create an observable of mouse click events:

// import the fromEvent operator
import { fromEvent } from 'rxjs';
// grab button reference
const button = document.getElementById('myButton');
// create an observable of button clicks
const myObservable = fromEvent(button, 'click');

Subscription

Operators

Pipe

Operators can be grouped into common categories

Creation operators

The most commonly used creation operators are of, from, and fromEvent.

Combination operators

Error handling operators

Filtering operators

Multicasting operators

Transformation operators

The most commonly used transformation operators are concatMap, map, mergeMap, scan, and switchMap.

Operators have common behaviors

Other similarities between operators

What does this get me?

Keep Going!

Learning RxJS can be intimidating, but it's a path I promise is worth the investment. If some of these concepts are still fuzzy (or make no sense at all!), don't worry! It will all click soon.

Start checking out the operators on the left hand side of the site for common examples and use-cases, as well as the additional introductory resources we have collected from across the web. Good luck and enjoy your journey to becoming a reactive programming expert!

Authenticable Observables: Build a Reactive App with JWT Auth

code pas assez détaillé, impossible à exécuter.

Observez les données avec RxJS