การทำงานกับ 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.
เมื่อคุณรวบรวมการแสดงผลจะเป็นดังที่แสดงด้านล่าง -