การทำงานกับ RxJS & ReactJS

ในบทนี้เราจะดูวิธีใช้ RxJ กับ ReactJS เราจะไม่เข้าสู่กระบวนการติดตั้ง Reactjs ที่นี่หากต้องการทราบเกี่ยวกับการติดตั้ง ReactJS โปรดดูลิงค์นี้: /reactjs/reactjs_environment_setup.htm

ตัวอย่าง

เราจะดำเนินการโดยตรงกับตัวอย่างด้านล่างซึ่งจะใช้ Ajax จาก RxJS เพื่อโหลดข้อมูล

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>

เราใช้ ajax จาก RxJS ที่จะโหลดข้อมูลจาก URL นี้ -https://jsonplaceholder.typicode.com/users.

เมื่อคุณรวบรวมการแสดงผลจะเป็นดังที่แสดงด้านล่าง -