Làm việc với RxJS & ReactJS
Trong chương này, chúng ta sẽ xem cách sử dụng RxJs với ReactJS. Chúng tôi sẽ không tham gia vào quá trình cài đặt Reactjs tại đây, để biết về Cài đặt ReactJS, hãy tham khảo liên kết này: /reactjs/reactjs_enosystem_setup.htm
Thí dụ
Chúng tôi sẽ trực tiếp làm việc trên một ví dụ dưới đây, nơi sẽ sử dụng Ajax từ RxJS để tải dữ liệu.
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>Chúng tôi đã sử dụng ajax từ RxJS sẽ tải dữ liệu từ Url này -https://jsonplaceholder.typicode.com/users.
Khi bạn biên dịch, màn hình hiển thị như hình dưới đây -
