{"id":72255,"date":"2025-01-03T09:25:06","date_gmt":"2025-01-03T08:25:06","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=72255&#038;preview=true&#038;preview_id=72255"},"modified":"2025-01-07T09:51:31","modified_gmt":"2025-01-07T08:51:31","slug":"wordpress-daten-paket","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/","title":{"rendered":"Verwendung des WordPress-Datenpakets zur Verwaltung des Anwendungsstatus"},"content":{"rendered":"<p>Die Verwaltung des Status <em>einer<\/em> WordPress-Anwendung &#8211; wie sie Daten verarbeitet und organisiert &#8211; kann eine Herausforderung sein. Wenn dein Projekt w\u00e4chst, wird es immer schwieriger, den \u00dcberblick \u00fcber den Datenfluss zu behalten und konsistente Aktualisierungen f\u00fcr alle Komponenten zu gew\u00e4hrleisten. Das WordPress-Datenpaket kann hier helfen, denn es bietet eine robuste L\u00f6sung f\u00fcr das Statusmanagement.<\/p>\n<p>Dieser Artikel befasst sich mit dem WordPress-Datenpaket, seinen Schl\u00fcsselkonzepten, Implementierungsstrategien und Best Practices.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Einf\u00fchrung in das WordPress-Datenpaket<\/h2>\n<p>Das <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Data Package<\/a> &#8211; offiziell <code>@wordpress\/data<\/code> &#8211; ist eine JavaScript (ES2015 und h\u00f6her) State Management Library, die eine vorhersehbare und zentralisierte M\u00f6glichkeit zur Verwaltung des Anwendungsstatus bietet. Die richtige Implementierung kann die Erstellung komplexer Benutzeroberfl\u00e4chen und die Verwaltung des Datenflusses in deiner Anwendung erleichtern.<\/p>\n<p>Das WordPress-Datenpaket ist von <a href=\"https:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Redux<\/a> inspiriert, einer beliebten Bibliothek zur Zustandsverwaltung im <a href=\"https:\/\/kinsta.com\/de\/blog\/react-komponenten-bibliotheken\/#20-react-redux\">React-\u00d6kosystem<\/a>.<\/p>\n<figure id=\"attachment_188531\" aria-describedby=\"caption-attachment-188531\" style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-188531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/the-redux-website-home-page.png\" alt=\"Die Startseite von Redux mit einem lilafarbenen Kopfbereich, der das Redux-Logo und den Titel sowie einen Slogan und eine Schaltfl\u00e4che \u201eLoslegen\u201c enth\u00e4lt. Darunter befinden sich vier Abschnitte mit den wichtigsten Funktionen und Symbolen. Jeder Abschnitt enth\u00e4lt beschreibenden Text, der die Funktionen von Redux f\u00fcr die Verwaltung des Anwendungsstatus, die Debugging-Tools und die Kompatibilit\u00e4t mit dem \u00d6kosystem erl\u00e4utert. Die obere Navigationsleiste enth\u00e4lt Links zu verschiedenen anderen Seiten der Website und eine Suchfunktion.\" width=\"960\" height=\"594\"><figcaption id=\"caption-attachment-188531\" class=\"wp-caption-text\">Die offizielle Redux-Website<\/figcaption><\/figure>\n<p>Hier arbeitet das Datenmodul innerhalb der WordPress-Umgebung und bietet Integrationen mit WordPress-spezifischen Funktionen und APIs. Wenn du f\u00fcr den <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">WordPress-Block-Editor<\/a> baust &#8211; oder ihn unterst\u00fctzen musst &#8211; ist das Paket entscheidend f\u00fcr die Verwaltung seines Zustands. Indem du dieselben Werkzeuge und Muster in deinen eigenen Plugins und Themes verwendest, kannst du eine konsistentere und vertrautere Entwicklungserfahrung schaffen.<\/p>\n<h3>Die Beziehung des Pakets zu Redux<\/h3>\n<p>Das WordPress-Datenpaket ist zwar von Redux inspiriert, aber es ist keine direkte Portierung. Es gibt viele Anpassungen an das WordPress-\u00d6kosystem und einige wichtige Unterschiede zwischen den beiden L\u00f6sungen:<\/p>\n<ul>\n<li>Das Datenpaket ist so konzipiert, dass es nahtlos mit den WordPress-APIs und -Funktionen zusammenarbeitet, was bei Redux ohne diese Anpassung nicht m\u00f6glich ist.<\/li>\n<li>Im Vergleich zu Redux bietet das Datenpaket eine schlankere API. Das kann den Einstieg erleichtern.<\/li>\n<li>Anders als Redux bietet das Datenpaket integrierte Unterst\u00fctzung f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/node-js-bibliotheken\/#5-async\">asynchrone Aktionen<\/a>. Wenn du mit der WordPress REST-API arbeitest, ist das sehr n\u00fctzlich.<\/li>\n<\/ul>\n<p>Das WordPress-Datenpaket hat auch einige Vergleiche mit der <a href=\"https:\/\/kinsta.com\/de\/blog\/rest-api-vs-web-api\/\">REST-API<\/a>. Beide befassen sich zwar mit der Datenverwaltung, aber sie dienen unterschiedlichen Zwecken:<\/p>\n<ul>\n<li>Die WordPress REST API bietet eine M\u00f6glichkeit, mit WordPress-Daten \u00fcber HTTP zu interagieren. Du verwendest sie f\u00fcr externe Anwendungen, <a href=\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/\">Headless WordPress Setups<\/a> und \u00fcberall dort, wo du <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-rest-api\/\">Daten abrufen und manipulieren<\/a> musst.<\/li>\n<li>Das WordPress-Datenpaket ist ein zentraler Speicher f\u00fcr Daten und UI-Status. Damit kannst du den Datenfluss und die Aktualisierungen innerhalb deiner Anwendung verwalten.<\/li>\n<\/ul>\n<p>In vielen F\u00e4llen wirst du beides zusammen verwenden: die REST-API, um Daten auf dem Server abzurufen und zu aktualisieren, und das WordPress-Datenpaket, um diese Daten innerhalb deiner Anwendung zu verwalten.<\/p>\n<h2>Schl\u00fcsselkonzepte und Terminologie f\u00fcr das WordPress-Datenpaket<\/h2>\n<p>Das WordPress-Datenpaket bietet eine intuitive M\u00f6glichkeit, den Status zu verwalten. Dies bezieht sich auf die Daten innerhalb eines Stores. Sie stellen den aktuellen Zustand deiner Anwendung dar und k\u00f6nnen sowohl den UI-Status (z. B. ob ein Modal ge\u00f6ffnet ist) als auch den Datenstatus (z. B. eine Liste von Beitr\u00e4gen) umfassen.<\/p>\n<figure id=\"attachment_188331\" aria-describedby=\"caption-attachment-188331\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-188331 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/post-list.png\" alt=\"Die Beitragsseite des WordPress-Dashboards zeigt eine Liste von 106 Beitr\u00e4gen mit verschiedenen Filteroptionen oben an. Diese Benutzeroberfl\u00e4che zeigt Spalten f\u00fcr Titel, Autor, Kategorien, Schlagw\u00f6rter und Datum an. Die linke Seitenleiste enth\u00e4lt typische WordPress-Admin-Navigationselemente zu anderen Bildschirmen. Sowohl ver\u00f6ffentlichte als auch geplante Inhalte sind in der Beitrags\u00fcbersicht enthalten.\" width=\"1200\" height=\"721\"><figcaption id=\"caption-attachment-188331\" class=\"wp-caption-text\">Der Zustand deiner Beitragsdaten ist ein Bereich, den das WordPress-Datenpaket verwaltet<\/figcaption><\/figure>\n<p>In diesem Zusammenhang ist ein Store der zentrale Mittelpunkt des WordPress-Datenpakets. Er enth\u00e4lt den gesamten Status der Website und bietet die Methoden, um auf diesen Status zuzugreifen und ihn zu aktualisieren. In WordPress kannst du mehrere Stores haben. Jeder von ihnen ist f\u00fcr einen bestimmten Bereich deiner Website zust\u00e4ndig.<\/p>\n<p>Um diese Stores zu verwalten, brauchst du ein Registry. Dieses zentrale Objekt bietet Methoden, um neue Stores zu registrieren und auf deine bestehenden zuzugreifen. In einem Registry werden Stores gespeichert, und diese Stores enthalten den Status deiner Anwendung.<\/p>\n<p>Es gibt verschiedene M\u00f6glichkeiten, mit dem Status zu arbeiten:<\/p>\n<ul>\n<li>Aktionen beschreiben die \u00c4nderungen an einem Zustand. Sie sind einfache JavaScript-Objekte und die einzige M\u00f6glichkeit, Statusaktualisierungen auszul\u00f6sen. Aktionen haben normalerweise eine <code>type<\/code> Eigenschaft, die die Aktion beschreibt. Sie kann auch zus\u00e4tzliche Daten enthalten.<\/li>\n<li>Selektoren extrahieren bestimmte Teile des Status aus dem Store. Mit diesen Funktionen kannst du auf Zustandsdaten zugreifen, ohne direkt mit der Struktur des Stores interagieren zu m\u00fcssen. Resolver sind verwandt und sorgen f\u00fcr <a href=\"https:\/\/kinsta.com\/courses\/speed-up-wordpress\/lazy-loading-async-defer\/\">asynchrones Abrufen von Daten<\/a>. Du verwendest sie, um sicherzustellen, dass du auf die ben\u00f6tigten Daten in einem Store zugreifen kannst, bevor du einen Selektor ausf\u00fchrst.<\/li>\n<li>Reducers legen fest, wie sich der Zustand als Reaktion auf Aktionen \u00e4ndern soll. Sie nehmen den aktuellen Status und eine Aktion als Argumente entgegen und geben ein neues Statusobjekt zur\u00fcck. Mit Kontrollfunktionen k\u00f6nnen die Reducer komplexe asynchrone Operationen ohne Seiteneffekte durchf\u00fchren.<\/li>\n<\/ul>\n<p>Du musst diese grundlegenden Konzepte verstehen, da sie alle zusammen ein robustes Zustandsverwaltungssystem mit Stores als Herzst\u00fcck bilden.<\/p>\n<h2>Stores: der zentrale Knotenpunkt des WordPress-Datenpakets<\/h2>\n<p>Stores sind die Container f\u00fcr den Zustand deiner Anwendung und bieten die Methoden, um mit ihm zu interagieren. Das WordPress-Datenpaket b\u00fcndelt einige andere Pakete, die jeweils Stores f\u00fcr das Block-Verzeichnis, den <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Block-Editor<\/a>, den Kern, die Post-Bearbeitung und mehr registrieren.<\/p>\n<p>Jeder Speicher hat einen eigenen Namensraum, z. B. <code>core<\/code>, <code>core\/editor<\/code> und <code>core\/notices<\/code>. Auch Plugins von Drittanbietern registrieren Speicher, daher musst du eindeutige Namensr\u00e4ume w\u00e4hlen, um Konflikte zu vermeiden. Unabh\u00e4ngig davon werden die von dir registrierten Stores in den meisten F\u00e4llen in der Standardregistrierung angezeigt.<\/p>\n<p>Dieses zentrale Objekt hat ein paar Aufgaben:<\/p>\n<ul>\n<li>Registrierung neuer Stores.<\/li>\n<li>Zugang zu bestehenden Stores gew\u00e4hren.<\/li>\n<li>Verwaltung von Abonnements f\u00fcr Zustands\u00e4nderungen.<\/li>\n<\/ul>\n<p>Auch wenn du nicht oft direkt mit Registry zu tun hast, musst du wissen, welche Rolle das Datenpaket bei der Verwaltung des Zustands in WordPress spielt.<\/p>\n<h3>Grundlegende Interaktion mit WordPress-Datenspeichern<\/h3>\n<p>Wenn du <a href=\"https:\/\/www.javascripttutorial.net\/es6\/\" target=\"_blank\" rel=\"noopener noreferrer\">ES2015+<\/a> JavaScript verwendest und mit einem WordPress-Plugin oder -Theme arbeitest, kannst du es als Abh\u00e4ngigkeit einbinden:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/data --save<\/code><\/pre>\n<p>In deinem Code importierst du die notwendigen Funktionen aus dem Paket am Anfang der Datei:<\/p>\n<pre><code class=\"language-bash\">import { select, dispatch, subscribe } from '@wordpress\/data';<\/code><\/pre>\n<p>Wenn du mit bestehenden WordPress Stores interagieren willst, musst du einige der importierten Funktionen verwenden. Der Zugriff auf Statusdaten mit <code>select<\/code> zum Beispiel:<\/p>\n<pre><code class=\"language-js\">const posts = select('core').getPosts();<\/code><\/pre>\n<p>Das Gleiche gilt f\u00fcr das Versenden von Aktionen:<\/p>\n<pre><code class=\"language-js\">dispatch('core').savePost(postData);<\/code><\/pre>\n<p>F\u00fcr das Abonnieren von Zustands\u00e4nderungen wird ein etwas anderes Format verwendet, aber das Konzept ist dasselbe:<\/p>\n<pre><code class=\"language-js\">subscribe(() =&gt; {\n  const newPosts = select('core').getPosts();\n  \/\/ Update your UI based on the new posts\n});<\/code><\/pre>\n<p>Du wirst jedoch nicht immer mit den Standard-Stores arbeiten. Oft arbeitest du mit bestehenden zus\u00e4tzlichen Speichern oder registrierst deine eigenen.<\/p>\n<h2>So registrierst du einen WordPress-Datenspeicher<\/h2>\n<p>Um die Konfiguration deines Stores festzulegen und ihn im WordPress-Datenpaket zu registrieren, musst du zun\u00e4chst die Funktion <code>register<\/code> importieren:<\/p>\n<pre><code class=\"language-js\">\u2026\nimport { createReduxStore, register } from '@wordpress\/data';\n\u2026<\/code><\/pre>\n<p>Diese nimmt ein einziges Argument entgegen &#8211; deinen Store Descriptor. Als N\u00e4chstes solltest du einen Standardstatus f\u00fcr den Laden definieren, um seine Standardwerte festzulegen:<\/p>\n<pre><code class=\"language-js\">\u2026\nconst DEFAULT_STATE = {\n  todos: [],\n};\n\u2026<\/code><\/pre>\n<p>Als N\u00e4chstes erstellst du ein <code>actions<\/code> Objekt, definierst eine <code>reducer<\/code> Funktion, um Statusaktualisierungen zu verarbeiten, und erstellst ein <code>selectors<\/code> Objekt mit Funktionen f\u00fcr den Zugriff auf Statusdaten:<\/p>\n<pre><code class=\"language-js\">const actions = {\n  addTodo: (text) =&gt; ({\n    type: 'ADD_TODO',\n    text,\n  }),\n};\n\nconst reducer = (state = DEFAULT_STATE, action) =&gt; {\n  switch (action.type) {\n    case 'ADD_TODO':\n      return {\n      ...state,\n      todos: [...state.todos, { text: action.text, completed: false }],\n      };\n    default:\n      return state;\n   }\n};\n\nconst selectors = {\n  getTodos: (state) =&gt; state.todos,\n};<\/code><\/pre>\n<p>Um die Konfiguration der Filiale zu erstellen, definierst du sie mit dem <code>createReduxStore<\/code> Objekt. Damit werden die Aktionen, Selektoren, Steuerelemente und andere Eigenschaften f\u00fcr deinen Store initialisiert:<\/p>\n<pre><code class=\"language-js\">const store = createReduxStore('my-plugin\/todos', {\n  reducer,\n  actions,\n  selectors,\n});<\/code><\/pre>\n<p>Dieses Objekt braucht mindestens einen Reduzierer, um die Form des Zustands zu definieren und wie er sich als Reaktion auf andere Aktionen \u00e4ndert. Abschlie\u00dfend registrierst du den Store, indem du den Store-Deskriptor aufrufst, den du mit <code>createReduxStore<\/code> definiert hast:<\/p>\n<pre><code class=\"language-js\">register(store);<\/code><\/pre>\n<p>Jetzt kannst du mit deinem benutzerdefinierten Store wie mit anderen interagieren:<\/p>\n<pre><code class=\"language-js\">import { select, dispatch } from '@wordpress\/data';\n\/\/ Add a new todo\ndispatch('my-plugin\/todos').addTodo('Learn WordPress data package');\n\/\/ Get all todos\nconst todos = select('my-plugin\/todos').getTodos();<\/code><\/pre>\n<p>Der Schl\u00fcssel zur Nutzung des WordPress-Datenpakets liegt darin, wie du die verschiedenen Eigenschaften und Objekte verwendest, die dir zur Verf\u00fcgung stehen.<\/p>\n<h2>Die f\u00fcnf Eigenschaften des WordPress-Datenspeichers aufschl\u00fcsseln<\/h2>\n<p>Die Verwendung des WordPress-Datenpakets erfolgt gr\u00f6\u00dftenteils &#8222;r\u00fcckw\u00e4rts&#8220;, d. h. du definierst die Eigenschaften des Datenspeichers auf niedriger Ebene, bevor du den eigentlichen Speicher erstellst. Das Objekt <code>createReduxStore<\/code> ist ein perfektes Beispiel daf\u00fcr, denn es <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#createreduxstore\">fasst alle Definitionen zusammen<\/a>, die du f\u00fcr den Deskriptor machst, mit dem du einen Speicher registrierst:<\/p>\n<pre><code class=\"language-js\">import { createReduxStore } from '@wordpress\/data';\n  const store = createReduxStore( 'demo', {\n    reducer: ( state = 'OK' ) =&gt; state,\n    selectors: {\n    getValue: ( state ) =&gt; state,\n    },\n  } );<\/code><\/pre>\n<p>Diese anderen Eigenschaften m\u00fcssen ebenfalls eingerichtet und konfiguriert werden.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Aktionen<\/h3>\n<p>Aktionen sind die wichtigste Methode, um Zustands\u00e4nderungen in deinem Laden auszul\u00f6sen. Sie sind einfache JavaScript-Objekte, die beschreiben, was passieren <em>soll<\/em>. Es kann also sinnvoll sein, sie zuerst zu erstellen, da du dann entscheiden kannst, welche Zust\u00e4nde du abrufen m\u00f6chtest.<\/p>\n<pre><code class=\"language-js\">const actions = {\n  addTodo: (text) =&gt; ({\n    type: 'ADD_TODO',\n    text,\n  }),\n  toggleTodo: (index) =&gt; ({\n    type: 'TOGGLE_TODO',\n    index,\n  }),\n};<\/code><\/pre>\n<p><a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action-creator\">Action Creators<\/a> nehmen optionale Argumente entgegen und geben ein Objekt zur\u00fcck, das sie an den von dir definierten Reducer weitergeben:<\/p>\n<pre><code class=\"language-js\">const actions = {\n  updateStockPrice: (symbol, newPrice) =&gt; {\n  return {\n    type: 'UPDATE_STOCK_PRICE',\n    symbol,\n    newPrice\n  };\n},<\/code><\/pre>\n<p>Wenn du einen Store-Deskriptor \u00fcbergibst, kannst du Action-Creators losschicken und den Statuswert aktualisieren:<\/p>\n<pre><code class=\"language-js\">dispatch('my-plugin\/todos').updateStockPrice('\u00a5', '150.37');<\/code><\/pre>\n<p>Betrachte Aktionsobjekte als Anweisungen f\u00fcr den Reducer, wie er Zustands\u00e4nderungen vornehmen soll. Zumindest wirst du wahrscheinlich Aktionen zum Erstellen, Aktualisieren, Lesen und L\u00f6schen (CRUD) definieren wollen. Es k\u00f6nnte auch sein, dass du eine eigene JavaScript-Datei f\u00fcr Aktionstypen hast und ein Objekt f\u00fcr alle diese Typen erstellst, vor allem wenn du sie als Konstanten definierst.<\/p>\n<h3>2. Reducer<\/h3>\n<p>Es lohnt sich, hier \u00fcber den Reducer zu sprechen, da er neben den Aktionen eine zentrale Rolle spielt. Seine Aufgabe ist es, festzulegen, wie sich der Zustand als Reaktion auf die Anweisungen \u00e4ndern soll, die er von einer Aktion erh\u00e4lt. Wenn du ihm die Anweisungen der Aktion und den aktuellen Zustand \u00fcbergibst, kann er ein neues Zustandsobjekt zur\u00fcckgeben und es in der Kette weitergeben:<\/p>\n<pre><code class=\"language-js\">const reducer = (state = DEFAULT_STATE, action) =&gt; {\n  switch (action.type) {\n    case 'ADD_TODO':\n      return {\n        ...state,\n        todos: [...state.todos, { text: action.text, completed: false }],\n      };\n    case 'TOGGLE_TODO':\n      return {\n        ...state,\n        todos: state.todos.map((todo, index) =&gt;\n          index === action.index ? { ...todo, completed: !todo.completed } : todo\n        ),\n    };\n    default:\n      return state;\n    }\n};<\/code><\/pre>\n<p>Beachte, dass ein Reducer eine <a href=\"https:\/\/www.geeksforgeeks.org\/functional-programming-pure-and-impure-functions\/\" target=\"_blank\" rel=\"noopener noreferrer\">reine Funktion<\/a> sein muss und den Zustand, den er annimmt, nicht ver\u00e4ndern sollte (er sollte ihn vielmehr mit Aktualisierungen zur\u00fcckgeben). Reducers und Actions stehen in vielerlei Hinsicht in einer symbiotischen Beziehung zueinander.<\/p>\n<h3>3. Selektoren<\/h3>\n<p>Um von einem registrierten Speicher auf den aktuellen Status zuzugreifen, brauchst du Selektoren. Das ist die wichtigste Methode, um den Zustand deines Stores &#8222;offenzulegen&#8220;, und sie helfen dir, deine Komponenten von der internen Struktur des Stores zu entkoppeln:<\/p>\n<pre><code class=\"language-js\">const selectors = {\n  getTodos: (state) =&gt; state.todos,\n  getTodoCount: (state) =&gt; state.todos.length,\n};<\/code><\/pre>\n<p>Du kannst diese Selektoren mit der Funktion <code>select<\/code> aufrufen:<\/p>\n<pre><code class=\"language-js\">const todoCount = select('my-plugin\/todos').getTodoCount();<\/code><\/pre>\n<p>Ein Selektor sendet diese Daten jedoch nirgendwohin: Er legt sie lediglich offen und erm\u00f6glicht den Zugriff.<\/p>\n<p>Selektoren k\u00f6nnen so viele Argumente erhalten, wie du brauchst, um genau auf den Zustand zuzugreifen. Der Wert, den er zur\u00fcckgibt, ist das Ergebnis dessen, was diese Argumente innerhalb des von dir definierten Selektors erreichen. Wie bei den Aktionen kannst du alle deine Selektoren in einer separaten Datei speichern, da es sehr viele davon geben kann.<\/p>\n<h3>4. Steuerelemente<\/h3>\n<p>Um den Ausf\u00fchrungsfluss der Funktionen deiner Website zu steuern &#8211; oder die Logik darin auszuf\u00fchren &#8211; <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b76a258213bde016726e16949d76fed12c5a34d\/packages\/redux-routine\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">verwendest du Steuerelemente<\/a>. Diese definieren das Verhalten der Ausf\u00fchrungsabl\u00e4ufe f\u00fcr deine Aktionen. Betrachte sie als Assistenten im WordPress-Datenpaket, da sie als Vermittler fungieren, um den Status zu sammeln und an die Resolver zu \u00fcbergeben.<\/p>\n<p>Controls k\u00fcmmern sich auch um Nebeneffekte in deinem Store, wie API-Aufrufe oder Interaktionen mit Browser-APIs. Mit ihnen kannst du die Reducer sauber halten und trotzdem komplexe asynchrone Operationen durchf\u00fchren:<\/p>\n<pre><code class=\"language-js\">const controls = {\n  FETCH_TODOS: async () =&gt; {\n    const response = await fetch('\/api\/todos');\n    return response.json();\n  },\n};\n\nconst actions = {\n  fetchTodos: () =&gt; ({ type: 'FETCH_TODOS' }),\n};<\/code><\/pre>\n<p>Dieser Zyklus des Abrufens und Zur\u00fcckgebens von Daten ist f\u00fcr den gesamten Prozess entscheidend. Aber ohne den Aufruf einer Aktion kannst du diese Daten nicht nutzen.<\/p>\n<h3>5. Aufl\u00f6ser<\/h3>\n<p>Selektoren legen den Zustand eines Stores offen, senden diese Daten aber nicht explizit weiter. Resolver treffen auf Selektoren (und Steuerelemente), um die Daten abzurufen. Wie Steuerelemente k\u00f6nnen sie auch asynchrone Datenabrufe durchf\u00fchren.<\/p>\n<pre><code class=\"language-js\">const resolvers = {\n  getTodos: async () =&gt; {\n    const todos = await controls.FETCH_TODOS();\n    return actions.receiveTodos(todos);\n  },\n};<\/code><\/pre>\n<p>Der Resolver stellt sicher, dass die angeforderten Daten im Store verf\u00fcgbar sind, bevor ein Selektor ausgef\u00fchrt wird. Diese enge Verbindung zwischen dem Resolver und dem Selektor bedeutet, dass die Namen \u00fcbereinstimmen m\u00fcssen. So kann das WordPress-Datenpaket erkennen, welchen Resolver es aufgrund der von dir angeforderten Daten aufrufen muss.<\/p>\n<p>Au\u00dferdem erh\u00e4lt der Resolver immer dieselben Argumente, die du an eine Selektorfunktion \u00fcbergibst, und er gibt auch Aktionsobjekte zur\u00fcck, liefert sie aus oder sendet sie ab.<\/p>\n<h2>Fehlerbehandlung bei der Verwendung des WordPress-Datenpakets<\/h2>\n<p>Wenn du mit dem WordPress-Datenpaket arbeitest, musst du eine angemessene <a href=\"https:\/\/kinsta.com\/de\/blog\/fehlern-in-javascript\/\">Fehlerbehandlung<\/a> implementieren. Wenn du dich f\u00fcr asynchrone Operationen entscheidest, mit <a href=\"https:\/\/kinsta.com\/courses\/node-js-full-stack-developer\/error-handling\/\">Full Stack Deployments<\/a> arbeitest oder API-Aufrufe machst, ist dies sogar noch wichtiger.<\/p>\n<p>Wenn du zum Beispiel Aktionen mit asynchronen Vorg\u00e4ngen ausf\u00fchrst, k\u00f6nnte ein try-catch-Block eine gute Option sein:<\/p>\n<pre><code class=\"language-js\">const StockUpdater = () =&gt; {\n  \/\/ Get the dispatch function\n  const { updateStock, setError, clearError } = useDispatch('my-app\/stocks');\n  const handleUpdateStock = async (stockId, newData) =&gt; {\n    try {\n      \/\/ Clear any existing errors\n      clearError();\n      \/\/ Attempt to update the stock\n      await updateStock(stockId, newData);\n    } catch (error) {\n      \/\/ Dispatch an error action if something goes wrong\n      setError(error.message);\n    }\n};\n\n  return (\n    &lt;button onClick={() =&gt; handleUpdateStock('AAPL', { price: 150 })}&gt;\n      Update Stock\n    &lt;\/button&gt;\n  );\n};<\/code><\/pre>\n<p>Bei Reduzierern kannst du mit Fehleraktionen umgehen und den Status aktualisieren:<\/p>\n<pre><code class=\"language-js\">const reducer = (state = DEFAULT_STATE, action) =&gt; {\n  switch (action.type) {\n    \/\/ ... other cases\n    case 'FETCH_TODOS_ERROR':\n      return {\n      ...state,\n      error: action.error,\n      isLoading: false,\n    };\n    default:\n      return state;\n  }\n};<\/code><\/pre>\n<p>Wenn du Selektoren verwendest, kannst du eine Fehlerpr\u00fcfung einbauen, um potenzielle Probleme zu behandeln und deine Komponenten auf Fehler zu \u00fcberpr\u00fcfen, bevor du die Daten verwendest:<\/p>\n<pre><code class=\"language-js\">const MyComponent = () =&gt; {\n  \/\/ Get multiple pieces of state including error information\n  const { data, isLoading, error } = useSelect((select) =&gt; ({\n    data: select('my-app\/stocks').getStockData(),\n    isLoading: select('my-app\/stocks').isLoading(),\n    error: select('my-app\/stocks').getError()\n  }));\n\n  \/\/ Handle different states\n  if (isLoading) {\n    return &lt;div&gt;Loading...&lt;\/div&gt;;\n  }\n\n  if (error) {\n    return (\n      &lt;div className=\"error-message\"&gt;\n        &lt;p&gt;Error loading stocks: {error.message}&lt;\/p&gt;\n        &lt;button onClick={retry}&gt;Try Again&lt;\/button&gt;\n      &lt;\/div&gt;\n    );\n  }\n  return (\n    &lt;div&gt;\n      {\/* Your normal component render *\/}\n    &lt;\/div&gt;\n  );\n};<\/code><\/pre>\n<p>Die Funktionen <code>useSelect<\/code> und <code>useDispatch<\/code> geben dir viele M\u00f6glichkeiten, Fehler im WordPress-Datenpaket zu behandeln. Mit beiden Funktionen kannst du eigene Fehlermeldungen als Argumente \u00fcbergeben.<\/p>\n<p>Es ist eine gute Praxis, den Fehlerstatus bei der Erstkonfiguration zu zentralisieren und die Fehlergrenzen auf Komponentenebene zu halten. Die Verwendung einer Fehlerbehandlung f\u00fcr Ladezust\u00e4nde tr\u00e4gt ebenfalls dazu bei, dass dein Code klar und konsistent bleibt.<\/p>\n<h2>Wie du deinen WordPress-Datenspeicher in deine Website integrierst<\/h2>\n<p>Das WordPress-Datenpaket kann dir bei der Verwaltung von Zust\u00e4nden eine Menge helfen. Es ist auch eine praktische \u00dcberlegung, wie du das alles zusammenbringen kannst. Schauen wir uns einen B\u00f6rsenticker an, der Finanzdaten in Echtzeit anzeigt und aktualisiert.<\/p>\n<p>Die erste Aufgabe besteht darin, einen Speicher f\u00fcr deine Daten zu erstellen:<\/p>\n<pre><code class=\"language-js\">import { createReduxStore, register } from '@wordpress\/data';\n\nconst DEFAULT_STATE = {\n  stocks: [],\n  isLoading: false,\n  error: null,\n};\n\nconst actions = {\n  fetchStocks: () =&gt; async ({ dispatch }) =&gt; {\n  dispatch({ type: 'FETCH_STOCKS_START' });\n  try {\n    const response = await fetch('\/api\/stocks');\n    const stocks = await response.json();\n    dispatch({ type: 'RECEIVE_STOCKS', stocks });\n  } catch (error) {\n    dispatch({ type: 'FETCH_STOCKS_ERROR', error: error.message });\n    }\n  },\n};\n\nconst reducer = (state = DEFAULT_STATE, action) =&gt; {\n  switch (action.type) {\n    case 'FETCH_STOCKS_START':\n      return { ...state, isLoading: true, error: null };\n    case 'RECEIVE_STOCKS':\n      return { ...state, stocks: action.stocks, isLoading: false };\n    case 'FETCH_STOCKS_ERROR':\n      return { ...state, error: action.error, isLoading: false };\n    default:\n      return state;\n  }\n};\n\nconst selectors = {\n  getStocks: (state) =&gt; state.stocks,\n  getStocksError: (state) =&gt; state.error,\n  isStocksLoading: (state) =&gt; state.isLoading,\n};\n\nconst store = createReduxStore('my-investing-app\/stocks', {\n  reducer,\n  actions,\n  selectors,\n});\n\nregister(store);<\/code><\/pre>\n<p>Dabei wird ein Standardzustand eingerichtet, der Fehler- und Ladezust\u00e4nde sowie deine Aktionen, Reduzierer und Selektoren enth\u00e4lt. Sobald du diese definiert hast, kannst du den Store registrieren.<\/p>\n<h3>Die Daten des Stores anzeigen<\/h3>\n<p>Wenn du einen Store eingerichtet hast, kannst du <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">eine React-Komponente erstellen<\/a>, um die darin enthaltenen Informationen anzuzeigen:<\/p>\n<pre><code class=\"language-js\">import { useSelect, useDispatch } from '@wordpress\/data';\nimport { useEffect } from '@wordpress\/element';\n\nconst StockTicker = () =&gt; {\n  const stocks = useSelect((select) =&gt; select('my-investing-app\/stocks').getStocks());\n  const error = useSelect((select) =&gt; select('my-investing-app\/stocks').getStocksError());\n  const isLoading = useSelect((select) =&gt; select('my-investing-app\/stocks').isStocksLoading());\n\n  const { fetchStocks } = useDispatch('my-investing-app\/stocks');\n\n  useEffect(() =&gt; {\n    fetchStocks();\n  }, []);\n\n  if (isLoading) {\n    return &lt;p&gt;Loading stock data...&lt;\/p&gt;;\n  }\n\n  if (error) {\n    return &lt;p&gt;Error: {error}&lt;\/p&gt;;\n  }\n\n  return (\n    &lt;div className=\"stock-ticker\"&gt;\n      &lt;h2&gt;Stock Ticker&lt;\/h2&gt;\n      &lt;ul&gt;\n       {stocks.map((stock) =&gt; (\n       &lt;li key={stock.symbol}&gt;\n        {stock.symbol}: ${stock.price}\n       &lt;\/li&gt;\n       ))}\n     &lt;\/ul&gt;\n   &lt;\/div&gt;\n  );\n};<\/code><\/pre>\n<p>Diese Komponente enth\u00e4lt die Hooks <code>useSelect<\/code> und <code>useDispatch<\/code> (und andere), um den Datenzugriff, das Dispatching von Aktionen und die Verwaltung des Lebenszyklus der Komponente zu steuern. Au\u00dferdem legt sie benutzerdefinierte Fehler- und Ladezustandsmeldungen fest und enth\u00e4lt Code, um den Ticker anzuzeigen. Jetzt musst du die Komponente bei WordPress registrieren.<\/p>\n<h3>Registrierung der Komponente bei WordPress<\/h3>\n<p>Ohne die Registrierung in WordPress kannst du die von dir erstellten Komponenten nicht verwenden. Das bedeutet, dass du sie als Block registrieren musst, obwohl es auch ein Widget sein k\u00f6nnte, wenn du f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\">klassische Themes<\/a> entwirfst. In diesem Beispiel wird ein Block verwendet.<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\nimport { StockTicker } from '.\/components\/StockTicker';\n\nregisterBlockType('my-investing-app\/stock-ticker', {\n  title: 'Stock Ticker',\n  icon: 'chart-line',\n  category: 'widgets',\n  edit: StockTicker,\n  save: () =&gt; null, \/\/ This will render dynamically\n});<\/code><\/pre>\n<p>Dieser Prozess folgt dem typischen Ansatz f\u00fcr die Registrierung von Bl\u00f6cken in WordPress und erfordert keine besondere Implementierung oder Einrichtung.<\/p>\n<h3>Statusaktualisierungen und Nutzerinteraktionen verwalten<\/h3>\n<p>Sobald du den Block registriert hast, musst du die Benutzerinteraktionen und Echtzeitaktualisierungen verwalten. Dazu brauchst du einige interaktive Steuerelemente sowie benutzerdefiniertes HTML und JavaScript:<\/p>\n<pre><code class=\"language-js\">const StockControls = () =&gt; {\n  const { addToWatchlist, removeFromWatchlist } = useDispatch('my-investing-app\/stocks');\n  return (\n    &lt;div className=\"stock-controls\"&gt;\n      &lt;button onClick={() =&gt; addToWatchlist('AAPL')}&gt;\n        Add Apple to Watchlist\n      &lt;\/button&gt;\n\n      &lt;button onClick={() =&gt; removeFromWatchlist('AAPL')}&gt;\n        Remove from Watchlist\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n};<\/code><\/pre>\n<p>F\u00fcr Echtzeitaktualisierungen kannst du in der React-Komponente ein Intervall einrichten:<\/p>\n<pre><code class=\"language-js\">useEffect(() =&gt; {\n  const { updateStockPrice } = dispatch('my-investing-app\/stocks');\n  const interval = setInterval(() =&gt; {\n    stocks.forEach(stock =&gt; {\n      fetchStockPrice(stock.symbol)\n        .then(price =&gt; updateStockPrice(stock.symbol, price));\n    });\n  }, 60000);\n\n  return () =&gt; clearInterval(interval);\n}, [stocks]);<\/code><\/pre>\n<p>Auf diese Weise bleiben die Daten deiner Komponente mit deinem Store synchron, w\u00e4hrend gleichzeitig eine klare Trennung der Bereiche beibehalten wird. Das WordPress-Datenpaket k\u00fcmmert sich um alle Statusaktualisierungen und sorgt so f\u00fcr Konsistenz in deiner Anwendung.<\/p>\n<h3>Server-seitiges Rendering<\/h3>\n<p>Schlie\u00dflich kannst du ein serverseitiges Rendering einrichten, um sicherzustellen, dass die Bestandsdaten beim Laden der Seite aktuell sind. Daf\u00fcr sind einige <a href=\"https:\/\/kinsta.com\/de\/blog\/tutorials-php\/\">PHP-Kenntnisse<\/a> erforderlich:<\/p>\n<pre><code class=\"language-js\">function my_investing_app_render_stock_ticker($attributes, $content) {\n  \/\/ Fetch the latest stock data from your API\n  $stocks = fetch_latest_stock_data();\n  ob_start();\n  ?&gt;\n  &lt;div class=\"stock-ticker\"&gt;\n    &lt;h2&gt;Stock Ticker&lt;\/h2&gt;\n    &lt;ul&gt;\n      &lt;?php foreach ($stocks as $stock) : ?&gt;\n        &lt;li&gt;&lt;?php echo esc_html($stock['symbol']); ?&gt;: $&lt;?php echo esc_html($stock['price']); ?&gt;&lt;\/li&gt;\n      &lt;?php endforeach; ?&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n\n  &lt;?php\n  return ob_get_clean();\n}\n\nregister_block_type('my-investing-app\/stock-ticker', array(\n  'render_callback' =&gt; 'my_investing_app_render_stock_ticker'\n));<\/code><\/pre>\n<p>Dieser Ansatz bietet eine vollst\u00e4ndige Integration deines Datenspeichers in WordPress, die vom ersten Rendering bis zu Echtzeitaktualisierungen und Nutzerinteraktionen alles abdeckt.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Das WordPress-Datenpaket ist ein komplexer, aber robuster Weg, um Anwendungszust\u00e4nde f\u00fcr deine Projekte zu verwalten. Hinter den Schl\u00fcsselkonzepten verbirgt sich ein Kaninchenbau aus Funktionen, Operatoren, Argumenten und vielem mehr. Vergiss aber nicht, dass nicht alle Daten in einem globalen Speicher liegen m\u00fcssen &#8211; der lokale Komponentenzustand hat immer noch einen Platz in deinem Code.<\/p>\n<p>Wirst du das WordPress-Datenpaket regelm\u00e4\u00dfig nutzen oder hast du eine andere Methode, um deinen Status zu verwalten? Teile uns deine Meinung in den Kommentaren unten mit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Verwaltung des Status einer WordPress-Anwendung &#8211; wie sie Daten verarbeitet und organisiert &#8211; kann eine Herausforderung sein. Wenn dein Projekt w\u00e4chst, wird es immer schwieriger, &#8230;<\/p>\n","protected":false},"author":259,"featured_media":72256,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999],"class_list":["post-72255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-entwicklung"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress-Datenpaket zur Verwaltung von Anwendungsstatus<\/title>\n<meta name=\"description\" content=\"Die Verwaltung von Zust\u00e4nden innerhalb komplexer Anwendungen kann schwierig sein. Lasst uns untersuchen, wie das WordPress-Datenpaket zur Verwaltung von Anwendungszust\u00e4nden verwendet werden kann.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Verwendung des WordPress-Datenpakets zur Verwaltung des Anwendungsstatus\" \/>\n<meta property=\"og:description\" content=\"Die Verwaltung von Zust\u00e4nden innerhalb komplexer Anwendungen kann schwierig sein. Lasst uns untersuchen, wie das WordPress-Datenpaket zur Verwaltung von Anwendungszust\u00e4nden verwendet werden kann.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-03T08:25:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-07T08:51:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steve Bonisteel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Die Verwaltung von Zust\u00e4nden innerhalb komplexer Anwendungen kann schwierig sein. Lasst uns untersuchen, wie das WordPress-Datenpaket zur Verwaltung von Anwendungszust\u00e4nden verwendet werden kann.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"17\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Verwendung des WordPress-Datenpakets zur Verwaltung des Anwendungsstatus\",\"datePublished\":\"2025-01-03T08:25:06+00:00\",\"dateModified\":\"2025-01-07T08:51:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/\"},\"wordCount\":2469,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/\",\"name\":\"WordPress-Datenpaket zur Verwaltung von Anwendungsstatus\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"datePublished\":\"2025-01-03T08:25:06+00:00\",\"dateModified\":\"2025-01-07T08:51:31+00:00\",\"description\":\"Die Verwaltung von Zust\u00e4nden innerhalb komplexer Anwendungen kann schwierig sein. Lasst uns untersuchen, wie das WordPress-Datenpaket zur Verwaltung von Anwendungszust\u00e4nden verwendet werden kann.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Verwendung des WordPress-Datenpakets zur Verwaltung des Anwendungsstatus\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"caption\":\"Steve Bonisteel\"},\"description\":\"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WordPress-Datenpaket zur Verwaltung von Anwendungsstatus","description":"Die Verwaltung von Zust\u00e4nden innerhalb komplexer Anwendungen kann schwierig sein. Lasst uns untersuchen, wie das WordPress-Datenpaket zur Verwaltung von Anwendungszust\u00e4nden verwendet werden kann.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/","og_locale":"de_DE","og_type":"article","og_title":"Verwendung des WordPress-Datenpakets zur Verwaltung des Anwendungsstatus","og_description":"Die Verwaltung von Zust\u00e4nden innerhalb komplexer Anwendungen kann schwierig sein. Lasst uns untersuchen, wie das WordPress-Datenpaket zur Verwaltung von Anwendungszust\u00e4nden verwendet werden kann.","og_url":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2025-01-03T08:25:06+00:00","article_modified_time":"2025-01-07T08:51:31+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"Die Verwaltung von Zust\u00e4nden innerhalb komplexer Anwendungen kann schwierig sein. Lasst uns untersuchen, wie das WordPress-Datenpaket zur Verwaltung von Anwendungszust\u00e4nden verwendet werden kann.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Steve Bonisteel","Gesch\u00e4tzte Lesezeit":"17\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Verwendung des WordPress-Datenpakets zur Verwaltung des Anwendungsstatus","datePublished":"2025-01-03T08:25:06+00:00","dateModified":"2025-01-07T08:51:31+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/"},"wordCount":2469,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/","url":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/","name":"WordPress-Datenpaket zur Verwaltung von Anwendungsstatus","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png","datePublished":"2025-01-03T08:25:06+00:00","dateModified":"2025-01-07T08:51:31+00:00","description":"Die Verwaltung von Zust\u00e4nden innerhalb komplexer Anwendungen kann schwierig sein. Lasst uns untersuchen, wie das WordPress-Datenpaket zur Verwaltung von Anwendungszust\u00e4nden verwendet werden kann.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/01\/wordpress-data-package-manage-application-state.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-daten-paket\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"Verwendung des WordPress-Datenpakets zur Verwaltung des Anwendungsstatus"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","caption":"Steve Bonisteel"},"description":"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.","url":"https:\/\/kinsta.com\/de\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=72255"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72255\/revisions"}],"predecessor-version":[{"id":72278,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72255\/revisions\/72278"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72255\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72255\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72255\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72255\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72255\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72255\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72255\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72255\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72255\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/72256"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=72255"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=72255"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=72255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}