Travailler avec RxJS et ReactJS

Dans ce chapitre, nous verrons comment utiliser RxJs avec ReactJS. Nous n'entrerons pas dans le processus d'installation de Reactjs ici, pour en savoir plus sur l'installation de ReactJS, reportez-vous à ce lien: /reactjs/reactjs_environment_setup.htm

Exemple

Nous travaillerons directement sur un exemple ci-dessous, où nous utiliserons Ajax de RxJS pour charger des données.

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';
class App extends Component {
   constructor() {
      super();
      this.state = { data: [] };
   }
   componentDidMount() {
      const response = ajax('https://jsonplaceholder.typicode.com/users').pipe(map(e => e.response));
      response.subscribe(res => {
         this.setState({ data: res });
      });
   }
   render() {
      return (
         <div>
            <h3>Using RxJS with ReactJS</h3>
            <ul>
               {this.state.data.map(el => (
                  <li>
                     {el.id}: {el.name}
                  </li>
               ))}
            </ul>
         </div>
      );
   }
}
ReactDOM.render(<App />, document.getElementById("root"));

index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8" />
      <title>ReactJS Demo</title>
   <head>
   <body>
      <div id = "root"></div>
   </body>
</html>

Nous avons utilisé ajax de RxJS qui chargera les données de cette URL -https://jsonplaceholder.typicode.com/users.

Lorsque vous compilez, l'affichage est comme indiqué ci-dessous -