Status Mit useSelector Auslesen

Um Daten aus dem Store in einer Komponente zu verwenden, liest man sie mit useSelector aus. Dieser Hook ermöglicht der Komponente den Zugriff auf den aktuellen Zustand.

Zustand auslesen

Innerhalb einer Komponente wird useSelector aufgerufen und der benötigte Teil des Zustands zurückgegeben:

import { useSelector } from 'react-redux';

function Counter() {
  const value = useSelector((state) => state.counter.value);

  return <p>{value}</p>;
}

Die Funktion erhält den vollständigen Store-Zustand, und es wird nur das ausgewählt, was benötigt wird.

Bedeutung

Komponenten sollten nicht vom gesamten Zustand abhängen. Durch das Auswählen eines kleinen Teils bleiben Komponenten übersichtlich und leichter wartbar.

Die Komponente wird automatisch aktualisiert, wenn sich der ausgewählte Zustand ändert. Ein manuelles Auslösen von Updates ist nicht erforderlich.