Wednesday, 16 March 2022

React Hooks- rxjs /ajax http call

 import React, { useState, useEffect } from 'react';

import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';

import './style.css';

export default function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const response = ajax('https://jsonplaceholder.typicode.com/users').pipe(
      map((e) => e.response)
    );
    response.subscribe((res) => {
      console.log(res);
      setData(res);
    });
  }, []);
  return (
    <div>
      <h1>Hello rxjs ajax call + react Hooks!</h1>
      <p> http call without using Axios or Fetch method</p>
      <ul>
        {data.map((el) => (
          <li>
            {el.id}: {el.name}
          </li>
        ))}
      </ul>
    </div>
  );
}


No comments:

Post a Comment

KISS, DRY, SOLID, YAGNI — A Simple Guide to Some Principles of Software Engineering and Clean Code

1 — KISS (Keep It Simple, Stupid)  Simplicity triumphs over complexity. Direct and clear codes are better for developing, maintaining, and s...