Rxjs avec Reactjs

Table des matières:

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. Dans un navigateur, RxJS est souvent utilisé dans le cadre du développement d’applications web basées sur JavaScript ou TypeScript, notamment avec des frameworks comme Angular ou React. Il est utilisé pour gérer les événements asynchrones, les appels AJAX, la manipulation des flux de données, et bien plus encore.

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;