Πώς να αποκτήσετε πρόσβαση στα δεδομένα στο React…

Υπάρχουν διάφοροι τρόποι πρόσβασης σε δεδομένα στο React:

Props: Μεταβίβαση δεδομένων από τον γονικό σε έναν παιδικό component. Τα props είναι αμετάβλητα μέσα στο component.

// Γονικός component
function ParentComponent() {
  const data = "Hello from Parent!";
  return <ChildComponent myData={data} />;
}

// Παιδικό component
function ChildComponent(props) {
  return <p>{props.myData}</p>; // Πρόσβαση σε δεδομένα μέσω props.myData
}

Κατάσταση (State): Διαχείριση δεδομένων εντός του component που μπορούν να αλλάξουν με τον χρόνο. Χρησιμοποιείται για δεδομένα που αφορούν συγκεκριμένο component.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0); // Ορισμός κατάστασης

  function handleClick() {
    setCount(count + 1); // Αλλαγή κατάστασης
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Context API: Λύση για κεντρική διαχείριση δεδομένων που είναι διαθέσιμα σε πολλά ενδογενή components χωρίς να χρειάζεται να περάσουν ρητά props σε κάθε επίπεδο. Κατάλληλο για παγκόσμια ή συχνά χρησιμοποιούμενα δεδομένα (π.χ. θέμα, αυθεντικοποίηση).

import React, { createContext, useContext } from 'react';

// Δημιουργία context
const MyContext = createContext();

// Provider context
function MyProvider({ children }) {
  const sharedData = "Shared Data";
  return (
    <MyContext.Provider value={sharedData}>
      {children}
    </MyContext.Provider>
  );
}

// Consumer context
function MyConsumerComponent() {
  const data = useContext(MyContext); // Πρόσβαση σε δεδομένα μέσω useContext
  return <p>{data}</p>;
}

Custom Hooks: Δημιουργία επαναχρησιμοποιήσιμης λογικής για πρόσβαση σε δεδομένα από εξωτερικές πηγές (π.χ. API).

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [url]); // Εξάρτηση από το url

  return { data, loading, error };
}

// Χρήση του hook
function DataDisplay() {
  const { data, loading, error } = useFetchData('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <p>{JSON.stringify(data)}</p>;
}

Βιβλιοθήκες (π.χ. Redux, Zustand): Για διαχείριση πολύπλοκων καταστάσεων εφαρμογής, χρησιμοποιούνται τρίτες βιβλιοθήκες. Προσφέρουν κεντρική αποθήκευση δεδομένων και μηχανισμούς για την διαχείριση των αλλαγών τους.

Πώς να αποκτήσετε πρόσβαση στα δεδομένα στο React;