RxJS est une excellente bibliothèque pour gérer les opérations asynchrones, les flux de données et la programmation réactive, que ce soit côté client ou côté serveur. Son utilisation simplifie souvent la gestion des opérations asynchrones en offrant une approche déclarative et réactive, ce qui peut rendre le code plus lisible, maintenable et efficace.
import React, { useState, useEffect } from 'react';
import { from } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';
const TaskList = () => {
const [tasks, setTasks] = useState([]);
useEffect(() => {
const fetchData = () => {
const source = ajax.getJSON('https://api.example.com/tasks');
const subscription = source.pipe(
map(response => response.tasks)
).subscribe({
next: tasks => setTasks(tasks),
error: err => console.error('Error fetching tasks:', err)
});
return () => subscription.unsubscribe();
};
fetchData();
}, []);
return (
<div>
<h2>Task List</h2>
<ul>
{tasks.map(task => (
<li key={task.id}>{task.title}</li>
))}
</ul>
</div>
);
};
export default TaskList;