Verwenden von RxJS in der Reaktionsentwicklung zum Verwalten des Anwendungsstatus

Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass er hier den Prozess der Entwicklung einer einfachen React-Anwendung demonstrieren möchte, die RxJS verwendet. Ihm zufolge ist er kein Experte für RxJS, da er diese Bibliothek studiert und die Hilfe von sachkundigen Personen nicht ablehnt. Ziel ist es, die Aufmerksamkeit des Publikums auf alternative Möglichkeiten zur Erstellung von React-Anwendungen zu lenken und den Leser zu unabhängigen Recherchen zu inspirieren. Dieses Material kann nicht als Einführung in RxJS bezeichnet werden. Eine der vielen Möglichkeiten, diese Bibliothek in der React-Entwicklung zu verwenden, wird hier gezeigt.

Wie alles begann

Kürzlich hat mich mein Kunde dazu inspiriert, die Verwendung von RxJS zum Verwalten des Status von React-Anwendungen zu lernen. Als ich den Anwendungscode für diesen Kunden prüfte, wollte er meine Meinung dazu wissen, wie er die Anwendung entwickelt hat, da zuvor ausschließlich der lokale Status von React verwendet wurde. Das Projekt erreichte einen Punkt, an dem es unangemessen war, sich ausschließlich auf React zu verlassen. Zunächst haben wir über die Verwendung von Redux oder MobX als besseres Mittel zur Verwaltung des Status Ihrer Anwendung gesprochen. Mein Kunde hat für jede dieser Technologien einen Prototyp erstellt. Er hörte jedoch nicht bei diesen Technologien auf und erstellte einen Prototyp einer React-Anwendung, die RxJS verwendet. Von diesem Moment an wurde unser Gespräch viel interessanter.

Die fragliche Anwendung war eine Handelsplattform für Kryptowährungen. Es gab viele Widgets, deren Daten in Echtzeit aktualisiert wurden. Die Entwickler dieser Anwendung mussten unter anderem folgende schwierige Aufgaben lösen:

• Verwalten Sie mehrere (asynchrone) Datenanforderungen.
• Echtzeit-Update einer großen Anzahl von Widgets auf dem Control Panel.
• Die Lösung für das Problem der Widgets und der Datenkonnektivität, da einige Widgets Daten nicht nur aus bestimmten Quellen, sondern auch aus anderen Widgets benötigten.

Infolgedessen waren die Hauptschwierigkeiten, mit denen die Entwickler konfrontiert waren, nicht mit der React-Bibliothek selbst verbunden, und außerdem konnte ich ihnen in diesem Bereich helfen. Das Hauptproblem bestand darin, die internen Mechanismen des Systems ordnungsgemäß funktionieren zu lassen, die Kryptowährungsdaten und Schnittstellenelemente verknüpfen, die von React-Tools erstellt wurden. In diesem Bereich haben sich die Fähigkeiten von RxJS als nützlich erwiesen, und der Prototyp, den sie mir zeigten, sah sehr vielversprechend aus.

Verwenden von RxJS in React

Angenommen, wir haben eine Anwendung, die nach dem Ausführen einiger lokaler Aktionen Anforderungen an eine Drittanbieter-API sendet . Sie können nach Artikeln suchen. Bevor wir die Anforderung ausführen, müssen wir den Text abrufen, der zur Erstellung dieser Anforderung verwendet wird. Insbesondere bilden wir anhand dieses Textes eine URL für den Zugriff auf die API. Hier ist der Code der React-Komponente, die diese Funktionalität implementiert

import React from 'react'; const App = ({ query, onChangeQuery }) => (  <div>    <h1>React with RxJS</h1>    <input      type="text"      value={query}      onChange={event => onChangeQuery(event.target.value)}    />    <p>{`http://hn.algolia.com/api/v1/search?query=${query}`}</p>  </div> ); export default App; 

Dieser Komponente fehlt ein Zustandsverwaltungssystem. Der Status für die query wird nirgendwo gespeichert. Die Funktion onChangeQuery aktualisiert den Status ebenfalls nicht. Bei dem herkömmlichen Ansatz ist eine solche Komponente mit einem lokalen Zustandsverwaltungssystem ausgestattet. Es sieht so aus:

 class App extends React.Component { constructor(props) {   super(props);   this.state = {     query: '',   }; } onChangeQuery = query => {   this.setState({ query }); }; render() {   return (     <div>       <h1>React with RxJS</h1>       <input         type="text"         value={this.state.query}         onChange={event =>           this.onChangeQuery(event.target.value)         }       />       <p>{`http://hn.algolia.com/api/v1/search?query=${         this.state.query       }`}</p>     </div>   ); } } export default App; 

Dies ist jedoch nicht der Ansatz, über den wir hier sprechen werden. Stattdessen möchten wir ein Anwendungsstatusverwaltungssystem mit RxJS einrichten. Schauen wir uns an, wie dies mit der Komponente höherer Ordnung (Higher Order Component, HOC) gemacht wird.

Wenn Sie möchten, können Sie eine ähnliche Logik in Ihre App Komponente implementieren, aber Sie entscheiden sich höchstwahrscheinlich irgendwann in Ihrer Arbeit an der Anwendung dafür, eine solche Komponente in Form eines HOC zu entwerfen, das für die Wiederverwendung geeignet ist.

React- und RxJS-Komponenten höchster Ordnung

Wir werden herausfinden, wie der Status von React-Anwendungen mithilfe von RxJS verwaltet wird, wobei zu diesem Zweck eine Komponente höherer Ordnung verwendet wird. Stattdessen könnte man die Render-Requisiten- Vorlage implementieren. Wenn Sie zu diesem Zweck keine Komponente höherer Ordnung selbst erstellen möchten, können Sie daher die beobachtbaren Komponenten höherer Ordnung Recompose mit mapPropsStream() und componentFromStream() . In diesem Handbuch werden wir jedoch alles selbst machen.

 import React from 'react'; const withObservableStream = (...) => Component => { return class extends React.Component {   componentDidMount() {}   componentWillUnmount() {}   render() {     return (       <Component {...this.props} {...this.state} />     );   } }; }; const App = ({ query, onChangeQuery }) => ( <div>   <h1>React with RxJS</h1>   <input     type="text"     value={query}     onChange={event => onChangeQuery(event.target.value)}   />   <p>{`http://hn.algolia.com/api/v1/search?query=${query}`}</p> </div> ); export default withObservableStream(...)(App); 

Während die Komponente höherer Ordnung RxJS keine Aktionen ausführt. Es überträgt nur seinen eigenen Status und seine eigenen Eigenschaften an die Eingabekomponente, die mit ihrer Hilfe erweitert werden soll. Wie Sie sehen, wird am Ende eine Komponente höherer Ordnung an der Verwaltung des Reaktionsstatus beteiligt sein. Dieser Zustand wird jedoch aus dem beobachteten Fluss erhalten. Bevor wir mit der Implementierung von HOC und der Verwendung mit der App Komponente beginnen, müssen wir RxJS installieren:

 npm install rxjs --save 

Beginnen wir nun mit der Verwendung einer Komponente höherer Ordnung und implementieren ihre Logik:

 import React from 'react'; import { BehaviorSubject } from 'rxjs'; ... const App = ({ query, onChangeQuery }) => ( <div>   <h1>React with RxJS</h1>   <input     type="text"     value={query}     onChange={event => onChangeQuery(event.target.value)}   />   <p>{`http://hn.algolia.com/api/v1/search?query=${query}`}</p> </div> ); const query$ = new BehaviorSubject({ query: 'react' }); export default withObservableStream( query$, {   onChangeQuery: value => query$.next({ query: value }), } )(App); 

Die App Komponente selbst ändert sich nicht. Wir haben gerade zwei Argumente an eine Komponente höherer Ordnung übergeben. Wir beschreiben sie:

• Beobachtetes Objekt. Das query ist ein beobachtbares Objekt, das einen Anfangswert hat, aber im Laufe der Zeit zusätzlich neue Werte zurückgibt (da dies ein BehaviorSubject ). Jeder kann dieses beobachtbare Objekt abonnieren. In der RxJS- Dokumentation wird Folgendes über Objekte vom Typ BehaviorSubject gesagt: „Eine der Optionen für Subject Objekte ist ein BehaviorSubject Objekt, das das Konzept des„ aktuellen Werts “verwendet. Es speichert den zuletzt an seine Abonnenten übergebenen Wert, und wenn ein neuer Beobachter ihn abonniert, erhält er sofort diesen „aktuellen Wert“ vom BehaviorSubject . Solche Objekte eignen sich gut zur Darstellung von Daten, von denen im Laufe der Zeit neue Teile erscheinen. "
• Das System zur Ausgabe neuer Werte für das beobachtete Objekt (Trigger). Die Funktion onChangeQuery() , die über das HOC an die App Komponente übergeben wird, ist eine reguläre Funktion, die den nächsten Wert an das beobachtete Objekt übergibt. Diese Funktion wird im Objekt übertragen, da möglicherweise mehrere Funktionen, die bestimmte Aktionen mit den beobachteten Objekten ausführen, auf eine Komponente höherer Ordnung übertragen werden müssen.

Nachdem Sie das beobachtete Objekt erstellt und abonniert haben, sollte der Ablauf für die Anforderung funktionieren. Bisher sieht die Komponente höherer Ordnung für uns jedoch wie eine Black Box aus. Wir erkennen es:

 const withObservableStream = (observable, triggers) => Component => { return class extends React.Component {   componentDidMount() {     this.subscription = observable.subscribe(newState =>       this.setState({ ...newState }),     );   }   componentWillUnmount() {     this.subscription.unsubscribe();   }   render() {     return (       <Component {...this.props} {...this.state} {...triggers} />     );   } }; }; 

Eine Komponente höherer Ordnung empfängt ein beobachtbares Objekt und ein Objekt mit Triggern (möglicherweise kann dieses Objekt, das Funktionen enthält, aus dem RxJS-Lexikon als erfolgreicher Begriff bezeichnet werden), die in der Funktionssignatur dargestellt sind.

Trigger werden nur über das HOC an die Eingabekomponente weitergeleitet. Aus diesem Grund empfängt die App Komponente direkt die Funktion onChangeQuery() , die direkt mit dem beobachteten Objekt arbeitet und ihm neue Werte übergibt.

Das beobachtete Objekt verwendet die Lebenszyklusmethode componentDidMount() zum Signieren und die Methode componentDidMount() zum Abbestellen. Das Abbestellen ist erforderlich, um Speicherverluste zu vermeiden. Beim Abonnement des beobachteten Objekts sendet die Funktion nur alle eingehenden Daten aus dem Stream mit dem Befehl this.setState() an den lokalen React State Store.

Nehmen wir eine kleine Änderung an der App Komponente vor, um das Problem zu beheben, das auftritt, wenn die Komponente höherer Ordnung den Anfangswert für die query festlegt. Wenn dies nicht getan wird, stellt sich zu Beginn der Arbeit heraus, dass die query undefined . Dank dieser Änderung erhält diese Eigenschaft den Standardwert.

 const App = ({ query = '', onChangeQuery }) => ( <div>   <h1>React with RxJS</h1>   <input     type="text"     value={query}     onChange={event => onChangeQuery(event.target.value)}   />   <p>{`http://hn.algolia.com/api/v1/search?query=${query}`}</p> </div> ); 

Eine andere Möglichkeit, dieses Problem zu beheben, besteht darin, den Anfangszustand für die query in einer Komponente höherer Ordnung festzulegen:

 const withObservableStream = ( observable, triggers, initialState, ) => Component => { return class extends React.Component {   constructor(props) {     super(props);     this.state = {       ...initialState,     };   }   componentDidMount() {     this.subscription = observable.subscribe(newState =>       this.setState({ ...newState }),     );   }   componentWillUnmount() {     this.subscription.unsubscribe();   }   render() {     return (       <Component {...this.props} {...this.state} {...triggers} />     );   } }; }; const App = ({ query, onChangeQuery }) => ( ... ); export default withObservableStream( query$, {   onChangeQuery: value => query$.next({ query: value }), }, {   query: '', } )(App); 

Wenn Sie diese Anwendung jetzt ausprobieren, sollte das Eingabefeld wie erwartet funktionieren. Die App Komponente empfängt vom HOC in Form von Eigenschaften nur den query und die Funktion onChangeQuery zum Ändern des Status.

Das Abrufen und Ändern des Status erfolgt über RxJS-beobachtbare Objekte, obwohl ein interner React-Statusspeicher in der Komponente höherer Ordnung verwendet wird. Ich konnte keine offensichtliche Lösung für das Problem finden, Daten aus einem Abonnement beobachteter Objekte direkt auf die Eigenschaften der erweiterten Komponente ( App ) zu streamen. Aus diesem Grund musste ich den lokalen Status von React in Form einer Zwischenschicht verwenden, was außerdem im Hinblick auf die Ursachen für das erneute Rendern praktisch ist. Wenn Sie einen anderen Weg kennen, um dieselben Ziele zu erreichen, können Sie ihn in den Kommentaren teilen.

Kombinieren beobachteter Objekte in Reaktion

Erstellen wir einen zweiten Wertestrom, der wie die query in der App Komponente verwendet werden kann. Später werden wir beide Werte verwenden und mit ihnen unter Verwendung eines anderen beobachtbaren Objekts arbeiten.

 const SUBJECT = { POPULARITY: 'search', DATE: 'search_by_date', }; const App = ({ query = '', subject, onChangeQuery, onSelectSubject, }) => ( <div>   <h1>React with RxJS</h1>   <input     type="text"     value={query}     onChange={event => onChangeQuery(event.target.value)}   />   <div>     {Object.values(SUBJECT).map(value => (       <button         key={value}         onClick={() => onSelectSubject(value)}         type="button"       >         {value}       </button>     ))}   </div>   <p>{`http://hn.algolia.com/api/v1/${subject}?query=${query}`}</p> </div> ); 

Wie Sie sehen, kann der subject Parameter verwendet werden, um die Anforderung beim Erstellen der URL für den Zugriff auf die API zu verfeinern. Die Materialien können nämlich nach ihrer Beliebtheit oder nach dem Datum der Veröffentlichung gesucht werden. Erstellen Sie als Nächstes ein weiteres beobachtbares Objekt, mit dem Sie den subject Parameter ändern können. Diese beobachtbare Größe kann verwendet werden, um eine App Komponente einer Komponente höherer Ordnung zuzuordnen. Andernfalls funktionieren die an die App Komponente übergebenen Eigenschaften nicht.

 import React from 'react'; import { BehaviorSubject, combineLatest } from 'rxjs/index'; ... const query$ = new BehaviorSubject({ query: 'react' }); const subject$ = new BehaviorSubject(SUBJECT.POPULARITY); export default withObservableStream( combineLatest(subject$, query$, (subject, query) => ({   subject,   query, })), {   onChangeQuery: value => query$.next({ query: value }),   onSelectSubject: subject => subject$.next(subject), }, )(App); 

Der onSelectSubject() ist nicht neu. Über eine Schaltfläche kann zwischen zwei subject umgeschaltet werden. Das beobachtete Objekt, das auf eine Komponente höherer Ordnung übertragen wird, ist jedoch etwas Neues. Es verwendet die Funktion combineLatest() von RxJS, um die zuletzt zurückgegebenen Werte von zwei (oder mehr) beobachteten Streams zu kombinieren. Wenn nach dem Abonnieren des beobachteten Objekts einer der Werte ( query oder subject ) geändert wird, erhält der Abonnent beide Werte.

Eine Ergänzung zu dem von der Funktion combineLatest() implementierten Mechanismus ist das letzte Argument. Hier können Sie die Rückgabereihenfolge der von den beobachteten Objekten erzeugten Werte festlegen. In unserem Fall müssen sie als Objekt dargestellt werden. Auf diese Weise können sie nach wie vor in einer Komponente höherer Ordnung zerstört und in den lokalen Reaktionsstatus geschrieben werden. Da wir bereits über die erforderliche Struktur verfügen, können wir den Schritt des Umschließens des Objekts des beobachteten query weglassen.

 ... const query$ = new BehaviorSubject('react'); const subject$ = new BehaviorSubject(SUBJECT.POPULARITY); export default withObservableStream( combineLatest(subject$, query$, (subject, query) => ({   subject,   query, })), {   onChangeQuery: value => query$.next(value),   onSelectSubject: subject => subject$.next(subject), }, )(App); 

Das Quellobjekt { query: '', subject: 'search' } sowie alle anderen Objekte, die vom kombinierten Strom beobachteter Objekte zurückgegeben werden, eignen sich zum Destrukturieren in einer Komponente höherer Ordnung und zum Schreiben der entsprechenden Werte in den lokalen React-Status. Nach dem Aktualisieren des Status wird wie zuvor das Rendern durchgeführt. Wenn Sie die aktualisierte Anwendung starten, sollten Sie in der Lage sein, beide Werte über das Eingabefeld und die Schaltfläche zu ändern. Geänderte Werte wirken sich auf die URL aus, die für den Zugriff auf die API verwendet wird. Selbst wenn sich nur einer dieser Werte ändert, behält der andere Wert seinen letzten Status bei, da die Funktion combineLatest() immer die neuesten Werte kombiniert, die aus den beobachteten Flüssen ausgegeben wurden.

Axios und RxJS reagieren

In unserem System basiert die URL für den Zugriff auf die API auf zwei Werten eines kombinierten beobachtbaren Objekts, das zwei weitere beobachtbare Objekte enthält. In diesem Abschnitt verwenden wir die URL, um Daten aus der API zu laden. Möglicherweise können Sie das React-Datenladesystem verwenden , aber wenn Sie beobachtbare RxJS-Objekte verwenden, müssen Sie unserer Anwendung einen weiteren beobachtbaren Stream hinzufügen.

Installieren Sie Axios, bevor Sie mit der Arbeit am nächsten beobachteten Objekt beginnen . Dies ist die Bibliothek, mit der wir Daten aus Streams in das Programm laden.

 npm install axios --save 

Stellen Sie sich nun vor, wir haben eine Reihe von Artikeln, die die App Komponente ausgeben soll. Hier verwenden wir als Wert des entsprechenden Standardparameters ein leeres Array, und zwar genauso wie bei anderen Parametern.

 ... const App = ({ query = '', subject, stories = [], onChangeQuery, onSelectSubject, }) => ( <div>   ...   <p>{`http://hn.algolia.com/api/v1/${subject}?query=${query}`}</p>   <ul>     {stories.map(story => (       <li key={story.objectID}>         <a href={story.url || story.story_url}>           {story.title || story.story_title}         </a>       </li>     ))}   </ul> </div> ); 

Für jeden Artikel in der Liste wird ein Fallback-Wert verwendet, da die API, auf die wir zugreifen, nicht einheitlich ist. Jetzt - am interessantesten - die Implementierung eines neuen beobachtbaren Objekts, das für das Laden von Daten in eine React-Anwendung verantwortlich ist, die diese visualisiert.

 import React from 'react'; import axios from 'axios'; import { BehaviorSubject, combineLatest } from 'rxjs'; import { flatMap, map } from 'rxjs/operators'; ... const query$ = new BehaviorSubject('react'); const subject$ = new BehaviorSubject(SUBJECT.POPULARITY); const fetch$ = combineLatest(subject$, query$).pipe( flatMap(([subject, query]) =>   axios(`http://hn.algolia.com/api/v1/${subject}?query=${query}`), ), map(result => result.data.hits), ); ... 

Ein neues beobachtbares Objekt ist wiederum eine Kombination aus beobachtbaren subject und query , da zum Erstellen der URL, mit der die API zum Laden von Daten verwendet wird, beide Werte benötigt werden. In der pipe() -Methode des beobachteten Objekts können wir die sogenannten "RxJS-Operatoren" verwenden, um bestimmte Aktionen mit den Werten auszuführen. In diesem Fall ordnen wir zwei Werte zu, die in der Abfrage platziert sind, die axios verwendet, um das Ergebnis zu erhalten. Wir verwenden den Operator flatMap() und nicht map() um auf das Ergebnis eines erfolgreich aufgelösten Versprechens zuzugreifen, und nicht auf das zurückgegebene Versprechen selbst. Infolgedessen wird nach dem Abonnieren dieses neuen beobachtbaren Objekts jedes Mal, wenn ein neuer subject oder query von anderen beobachtbaren Objekten in das System eingegeben wird, eine neue query ausgeführt, und das Ergebnis befindet sich in der Abonnementfunktion.

Jetzt können wir wieder eine neue beobachtbare Komponente für eine Komponente höherer Ordnung bereitstellen. Wir haben das letzte Argument für die Funktion combineLatest() Verfügung. Dies ermöglicht es, sie direkt einer Eigenschaft namens stories zuzuordnen. Am Ende stellt dies dar, wie diese Daten bereits in der App Komponente verwendet werden.

 export default withObservableStream( combineLatest(   subject$,   query$,   fetch$,   (subject, query, stories) => ({     subject,     query,     stories,   }), ), {   onChangeQuery: value => query$.next(value),   onSelectSubject: subject => subject$.next(subject), }, )(App); 

Hier gibt es keinen Auslöser, da das beobachtete Objekt indirekt durch zwei andere beobachtete Flüsse aktiviert wird. Jedes Mal, wenn ein Wert im Eingabefeld ( query ) geändert oder eine Schaltfläche angeklickt wird ( subject ), wirkt sich dies auf das beobachtete fetch , das die neuesten Werte aus beiden Streams enthält.

Möglicherweise benötigen wir dies jedoch nicht jedes Mal, wenn wir den Wert im Eingabefeld ändern. Dies wirkt sich auf das beobachtete fetch . Außerdem möchten wir nicht, dass der fetch beeinflusst wird, wenn der Wert eine leere Zeichenfolge ist. Aus diesem Grund können wir das beobachtbare query mithilfe der debounce Anweisung erweitern, wodurch zu häufige debounce . Dank dieses Mechanismus wird nämlich ein neues Ereignis erst nach einer vorbestimmten Zeit nach dem vorherigen Ereignis akzeptiert. Außerdem verwenden wir hier den Filteroperator, der Stream-Ereignisse herausfiltert, wenn die query leer ist.

 import React from 'react'; import axios from 'axios'; import { BehaviorSubject, combineLatest, timer } from 'rxjs'; import { flatMap, map, debounce, filter } from 'rxjs/operators'; ... const queryForFetch$ = query$.pipe( debounce(() => timer(1000)), filter(query => query !== ''), ); const fetch$ = combineLatest(subject$, queryForFetch$).pipe( flatMap(([subject, query]) =>   axios(`http://hn.algolia.com/api/v1/${subject}?query=${query}`), ), map(result => result.data.hits), ); ... 

Die debounce Anweisung übernimmt die Eingabe von Daten in das Feld. Wenn jedoch eine Schaltfläche auf den Betreffwert klickt, sollte die Anforderung sofort ausgeführt werden.

Die Anfangswerte für query und subject , die wir sehen, wenn die App Komponente zum ersten Mal angezeigt wird, stimmen nicht mit denen überein, die aus den Anfangswerten der beobachteten Objekte erhalten wurden:

 const query$ = new BehaviorSubject('react'); const subject$ = new BehaviorSubject(SUBJECT.POPULARITY); 

subject in subject , eine leere Zeichenfolge wird query . Dies liegt an der Tatsache, dass wir diese Werte als Standardparameter für die Umstrukturierung der Funktion der App Komponente in der Signatur angegeben haben. Der Grund dafür ist, dass wir auf die erste Anforderung warten müssen, die vom beobachtbaren fetch wird. Da ich nicht genau weiß, wie man sofort Werte von beobachtbaren query und Betreffobjekten in einer Komponente höherer Ordnung erhält, um sie in einen lokalen Zustand zu schreiben, habe ich beschlossen, den Anfangszustand für die Komponente höherer Ordnung erneut einzurichten.

 const withObservableStream = ( observable, triggers, initialState, ) => Component => { return class extends React.Component {   constructor(props) {     super(props);     this.state = {       ...initialState,     };   }   componentDidMount() {     this.subscription = observable.subscribe(newState =>       this.setState({ ...newState }),     );   }   componentWillUnmount() {     this.subscription.unsubscribe();   }   render() {     return (       <Component {...this.props} {...this.state} {...triggers} />     );   } }; }; 

Nun kann der Ausgangszustand als drittes Argument einer Komponente höherer Ordnung zur Verfügung gestellt werden. In Zukunft können wir die Standardeinstellungen für die App Komponente entfernen.

 ... const App = ({ query, subject, stories, onChangeQuery, onSelectSubject, }) => ( ... ); export default withObservableStream( combineLatest(   subject$,   query$,   fetch$,   (subject, query, stories) => ({     subject,     query,     stories,   }), ), {   onSelectSubject: subject => subject$.next(subject),   onChangeQuery: value => query$.next(value), }, {   query: 'react',   subject: SUBJECT.POPULARITY,   stories: [], }, )(App); 

Was mich momentan beunruhigt, ist, dass der Anfangszustand auch in der Deklaration der beobachteten query$ und subject$ . Dieser Ansatz ist fehleranfällig, da die Initialisierung der beobachteten Objekte und der Anfangszustand der Komponente höherer Ordnung dieselben Werte aufweisen. Mir wäre es besser gefallen, wenn stattdessen die Anfangswerte von den beobachteten Objekten in einer Komponente höherer Ordnung abgerufen worden wären, um den Anfangszustand festzulegen. Vielleicht kann einer der Leser dieses Materials in den Kommentaren Ratschläge dazu geben.

Den Code für das Softwareprojekt, das wir hier erstellt haben, finden Sie hier .

Zusammenfassung

Das Hauptziel dieses Artikels ist es, einen alternativen Ansatz zur Entwicklung von React-Anwendungen mit RxJS zu demonstrieren. Wir hoffen, er hat Sie zum Nachdenken angeregt. Manchmal sind Redux und MobX nicht erforderlich, aber in solchen Situationen ist RxJS möglicherweise genau das, was für ein bestimmtes Projekt geeignet ist.

Liebe Leser! Verwenden Sie RxJS bei der Entwicklung von React-Anwendungen?