{"id":80120,"date":"2025-01-03T09:27:42","date_gmt":"2025-01-03T08:27:42","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=80120&#038;preview=true&#038;preview_id=80120"},"modified":"2026-02-24T12:07:21","modified_gmt":"2026-02-24T11:07:21","slug":"pacchetto-dati-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/","title":{"rendered":"Come utilizzare il pacchetto dati di WordPress per gestire gli stati delle applicazioni"},"content":{"rendered":"<p>Gestire lo stato di <em>qualsiasi<\/em> applicazione WordPress, ovvero il modo in cui gestisce e organizza i dati, pu\u00f2 essere una vera sfida. Man mano che un progetto cresce, tenere traccia del flusso di dati e garantire aggiornamenti coerenti tra i vari componenti diventa sempre pi\u00f9 difficile. Il pacchetto dati di WordPress pu\u00f2 essere d&#8217;aiuto in questo senso, in quanto fornisce una soluzione solida per la gestione dello stato.<\/p>\n<p>Questo articolo analizza il pacchetto dati di WordPress, esplorandone i concetti chiave, le strategie di implementazione e le best practice.<\/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>Il pacchetto dati di WordPress<\/h2>\n<p>Il <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/\" target=\"_blank\" rel=\"noopener noreferrer\">pacchetto dati di WordPress<\/a> (ufficialmente <code>@wordpress\/data<\/code>) \u00e8 una libreria di gestione dello stato in JavaScript (ES2015 e versioni successive) che fornisce un modo prevedibile e centralizzato per gestire lo stato delle applicazioni. La giusta implementazione pu\u00f2 facilitare la costruzione di interfacce utente complesse e la gestione del flusso di dati all&#8217;interno dell&#8217;applicazione.<\/p>\n<p>Il pacchetto dati di WordPress si ispira a <a href=\"https:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Redux<\/a>, una libreria di gestione dello stato molto diffusa nell&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/libreria-componenti-react\/#20-react-redux\">ecosistema React<\/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=\"size-full wp-image-188531\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/the-redux-website-home-page.png\" alt=\"La homepage di Redux, caratterizzata da una sezione di intestazione viola contenente il logo e il titolo di Redux, oltre a una tagline e al pulsante Get Started. Al di sotto di questa sono presenti quattro sezioni di funzionalit\u00e0 chiave con icone. Ogni sezione comprende un testo descrittivo che spiega le funzionalit\u00e0 di Redux per la gestione dello stato delle applicazioni, gli strumenti di debug e la compatibilit\u00e0 con l'ecosistema. La barra di navigazione superiore contiene collegamenti a varie altre pagine del sito e alla funzionalit\u00e0 di ricerca.\" width=\"960\" height=\"594\"><figcaption id=\"caption-attachment-188531\" class=\"wp-caption-text\">Il sito ufficiale di Redux.<\/figcaption><\/figure>\n<p>In questo caso, il modulo dati funziona all&#8217;interno dell&#8217;ambiente WordPress e fornisce integrazioni con funzionalit\u00e0 e API specifiche di WordPress. Se costruite per l&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">editor a blocchi di WordPress<\/a>, o se \u00e8 qualcosa che dovete supportare, il pacchetto sar\u00e0 fondamentale per gestire il suo stato. Utilizzando gli stessi strumenti e modelli in plugin e temi, \u00e8 possibile creare un&#8217;esperienza di sviluppo pi\u00f9 coerente e familiare.<\/p>\n<h3>Il rapporto del pacchetto con Redux<\/h3>\n<p>Sebbene il pacchetto dati di WordPress tragga ispirazione da Redux, non si tratta di un porting diretto. Sono state introdotte diverse modifiche per adattarlo all&#8217;ecosistema WordPress ed esistono alcune differenze chiave tra le due soluzioni:<\/p>\n<ul>\n<li>Il pacchetto dati \u00e8 stato progettato per funzionare perfettamente con le API e le funzionalit\u00e0 di WordPress, cosa che Redux vanilla non pu\u00f2 fare senza questo adattamento.<\/li>\n<li>Rispetto a Redux, il pacchetto dati fornisce un&#8217;API pi\u00f9 snella. Questo pu\u00f2 rendere pi\u00f9 facile iniziare a lavorare.<\/li>\n<li>A differenza di Redux, il pacchetto dati include un supporto integrato per le <a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-node-js\/#5-async\">azioni asincrone<\/a>. Se lavorate con l&#8217;API REST di WordPress, vi sar\u00e0 utile.<\/li>\n<\/ul>\n<p>Il pacchetto dati di WordPress pu\u00f2 essere paragonato all&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/api-rest-vs-api-web\/\">API REST<\/a>. Sebbene entrambi si occupino della gestione dei dati, hanno scopi diversi:<\/p>\n<ul>\n<li>L&#8217;API REST di WordPress fornisce un modo per interagire con i dati di WordPress tramite HTTP. La utilizzerete per le applicazioni esterne, per le <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/\">configurazioni di WordPress headless<\/a> e ovunque abbiate bisogno di <a href=\"https:\/\/kinsta.com\/it\/blog\/rest-api-wordpress\/\">recuperare e manipolare i dati<\/a>.<\/li>\n<li>Il pacchetto dati di WordPress fornisce un archivio centralizzato per i dati e lo stato dell&#8217;interfaccia utente. \u00c8 un modo per gestire il flusso di dati e gli aggiornamenti all&#8217;interno della vostra applicazione.<\/li>\n<\/ul>\n<p>In molti casi, userete entrambi insieme: l&#8217;API REST per recuperare e aggiornare i dati sul server e il pacchetto dati WordPress per gestire quei dati all&#8217;interno della vostra applicazione.<\/p>\n<h2>Concetti chiave e terminologia del pacchetto dati WordPress<\/h2>\n<p>Il pacchetto dati WordPress offre un modo intuitivo di gestire lo stato. Questo si riferisce ai dati all&#8217;interno di uno store, o archivio. Rappresenta la condizione attuale della vostra applicazione e pu\u00f2 includere sia lo stato dell&#8217;interfaccia utente (ad esempio se c&#8217;\u00e8 una finestra modale aperta) che lo stato dei dati (ad esempio un elenco di post).<\/p>\n<figure id=\"attachment_188331\" aria-describedby=\"caption-attachment-188331\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-188331\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/post-list.png\" alt=\"La pagina Messaggi della dashboard di WordPress mostra un elenco di 106 post con varie opzioni di filtraggio nella parte superiore. Questa interfaccia mostra colonne per titolo, autore, categorie, tag e data. La barra laterale sinistra contiene i tipici elementi di navigazione dell'amministrazione di WordPress verso altre schermate. Nell'elenco dei post sono inclusi sia i contenuti pubblicati che quelli programmati.\" width=\"1200\" height=\"721\"><figcaption id=\"caption-attachment-188331\" class=\"wp-caption-text\">Lo stato dei dati dei post \u00e8 una delle aree gestite dal pacchetto dati di WordPress.<\/figcaption><\/figure>\n<p>In questo contesto, uno store \u00e8 l&#8217;hub centrale del pacchetto dati di WordPress. Contiene l&#8217;intero stato del sito e fornisce i metodi per accedervi e aggiornarlo. In WordPress potete avere pi\u00f9 store. Ognuno di essi sar\u00e0 responsabile di un&#8217;area specifica del vostro sito.<\/p>\n<p>Per gestire questi store, avete bisogno di un registro. Questo oggetto centrale fornisce i metodi per registrare nuovi store e accedere a quelli esistenti. Il registro contiene gli store, e questi store contengono lo stato dell&#8217;applicazione.<\/p>\n<p>Ci sono diversi modi per lavorare con lo stato:<\/p>\n<ul>\n<li>Le azioni (<em>actions<\/em>) descrivono le modifiche a uno stato. Sono oggetti JavaScript semplici e sono l&#8217;unico modo per attivare gli aggiornamenti dello stato. Le azioni hanno in genere una propriet\u00e0 <code>type<\/code> che descrive l&#8217;azione. Pu\u00f2 anche includere dati aggiuntivi.<\/li>\n<li>I selettori (<em>selectors<\/em>) estraggono pezzi specifici di stato dallo store. Queste funzioni permettono di accedere ai dati dello stato senza dover interagire direttamente con la struttura dell&#8217;archivio. I risolutori sono correlati e gestiscono il <a href=\"https:\/\/kinsta.com\/courses\/speed-up-wordpress\/lazy-loading-async-defer\/\">recupero asincrono dei dati<\/a>. Si usano per assicurarsi di poter accedere ai dati richiesti in un archivio prima di eseguire un selettore.<\/li>\n<li>I riduttori (<em>reducers<\/em>) specificano come lo stato deve cambiare in risposta alle azioni. Prendono come argomenti lo stato corrente e un&#8217;azione e restituiscono un nuovo oggetto stato. Le funzioni di controllo permettono ai riduttori di gestire operazioni asincrone complesse senza effetti collaterali.<\/li>\n<\/ul>\n<p>\u00c8 necessario comprendere questi concetti fondamentali, poich\u00e9 tutti lavorano insieme per creare un solido sistema di gestione dello stato con gli store al suo centro.<\/p>\n<h2>Gli store: l&#8217;hub centrale del pacchetto dati di WordPress<\/h2>\n<p>Gli store sono i contenitori dello stato delle applicazioni e forniscono i metodi per interagire con esso. Il pacchetto dati di WordPress raggruppa alcuni altri pacchetti e ognuno di questi registra gli archivi per la directory dei blocchi, l&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">editor a blocchi<\/a>, il core, la modifica dei post e altro ancora.<\/p>\n<p>Ogni archivio avr\u00e0 un namespace unico, come <code>core<\/code>, <code>core\/editor<\/code> e <code>core\/notices<\/code>. Anche i plugin di terze parti registreranno gli store, quindi \u00e8 necessario scegliere namespace unici per evitare conflitti. In ogni caso, nella maggior parte dei casi gli store registrati saranno presenti nel registro predefinito.<\/p>\n<p>Questo oggetto centrale ha alcune responsabilit\u00e0:<\/p>\n<ul>\n<li>Registrare nuovi store.<\/li>\n<li>Fornire l&#8217;accesso agli store esistenti.<\/li>\n<li>Gestire le sottoscrizioni alle modifiche di stato.<\/li>\n<\/ul>\n<p>Anche se spesso non si ha un&#8217;interazione diretta con il registro, \u00e8 necessario comprendere il suo ruolo nel modo in cui il pacchetto dati orchestra la gestione dello stato in WordPress.<\/p>\n<h3>Interazione di base con gli archivi di dati di WordPress<\/h3>\n<p>Se utilizzate JavaScript <a href=\"https:\/\/www.javascripttutorial.net\/es6\/\" target=\"_blank\" rel=\"noopener noreferrer\">ES2015+<\/a> e state lavorando con un plugin o un tema di WordPress, potete includerlo come dipendenza:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/data --save<\/code><\/pre>\n<p>Nel vostro codice, importerete le funzioni necessarie dal pacchetto all&#8217;inizio del file:<\/p>\n<pre><code class=\"language-bash\">import { select, dispatch, subscribe } from '@wordpress\/data';<\/code><\/pre>\n<p>L&#8217;interazione con gli store WordPress esistenti richiede l&#8217;utilizzo di alcune delle funzioni importate. Accedere ai dati di stato con <code>select<\/code>, ad esempio:<\/p>\n<pre><code class=\"language-js\">const posts = select('core').getPosts();<\/code><\/pre>\n<p>Lo stesso vale per il dispatching delle azioni:<\/p>\n<pre><code class=\"language-js\">dispatch('core').savePost(postData);<\/code><\/pre>\n<p>La sottoscrizione ai cambiamenti di stato utilizza un formato leggermente diverso, ma il concetto \u00e8 lo stesso:<\/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>Tuttavia, non lavorerete sempre con gli store predefiniti. Spesso lavorerete con archivi aggiuntivi esistenti o registrerete i vostri.<\/p>\n<h2>Come registrare un archivio dati WordPress<\/h2>\n<p>Per definire la configurazione del vostro store e registrarlo con il pacchetto dati di WordPress \u00e8 necessario importare la funzione <code>register<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nimport { createReduxStore, register } from '@wordpress\/data';\n\u2026<\/code><\/pre>\n<p>Questa funzione accetta un unico argomento: il descrittore del vostro store. Successivamente, dovrete definire uno stato predefinito per lo store per impostare i suoi valori predefiniti:<\/p>\n<pre><code class=\"language-js\">\u2026\nconst DEFAULT_STATE = {\n  todos: [],\n};\n\u2026<\/code><\/pre>\n<p>Quindi, create un oggetto <code>actions<\/code>, definite una funzione <code>reducer<\/code> per gestire gli aggiornamenti dello stato e create un oggetto <code>selectors<\/code> con le funzioni per accedere ai dati dello stato:<\/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>Per creare la configurazione dello store, definitela utilizzando l&#8217;oggetto <code>createReduxStore<\/code>. In questo modo verranno inizializzate le azioni, i selettori, i controlli e le altre propriet\u00e0 dello store:<\/p>\n<pre><code class=\"language-js\">const store = createReduxStore('my-plugin\/todos', {\n  reducer,\n  actions,\n  selectors,\n});<\/code><\/pre>\n<p>Il minimo che serve a questo oggetto \u00e8 un riduttore per definire la forma dello stato e come cambia in risposta ad altre azioni. Infine, registrate lo store, chiamando il descrittore dello store che avete definito con <code>createReduxStore<\/code>:<\/p>\n<pre><code class=\"language-js\">register(store);<\/code><\/pre>\n<p>Ora potete interagire con il vostro store personalizzato come fareste con gli altri:<\/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>Il segreto dell&#8217;utilizzo del pacchetto dati di WordPress sta nell&#8217;uso delle diverse propriet\u00e0 e degli oggetti a disposizione.<\/p>\n<h2>Le cinque propriet\u00e0 dello store dati di WordPress<\/h2>\n<p>Gran parte dell&#8217;utilizzo del pacchetto dati di WordPress avviene &#8220;al contrario&#8221;, ovvero definendo le propriet\u00e0 di basso livello dello store di dati prima dello store stesso. L&#8217;oggetto <code>createReduxStore<\/code> \u00e8 un esempio perfetto, in quanto <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#createreduxstore\" target=\"_blank\" rel=\"noopener noreferrer\">riunisce<\/a> tutte le definizioni fatte per creare il descrittore usato per registrare un archivio:<\/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>Anche queste altre propriet\u00e0 devono essere impostate e configurate.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Le azioni<\/h3>\n<p>Le azioni sono il modo principale per attivare i cambiamenti di stato nel vostro store. Sono semplici oggetti JavaScript che descrivono ci\u00f2 che <em>deve<\/em> accadere. Per questo motivo, pu\u00f2 essere una buona idea crearle per prime, in quanto potete decidere quali stati volete recuperare.<\/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>I <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action-creator\">creatori di azioni<\/a> accettano argomenti opzionali e restituiscono un oggetto da passare al riduttore che avete definito:<\/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>Se inserite un descrittore dello store, potete inviare i creatori di azioni e aggiornare il valore dello stato:<\/p>\n<pre><code class=\"language-js\">dispatch('my-plugin\/todos').updateStockPrice('\u00a5', '150.37');<\/code><\/pre>\n<p>Considerate gli oggetti azione come istruzioni per il riduttore su come apportare modifiche allo stato. Come minimo, probabilmente vorrete definire azioni di creazione, aggiornamento, lettura e cancellazione (CRUD). Potreste anche avere un file JavaScript separato per i tipi di azione e creare un oggetto per tutti questi tipi, soprattutto se li definite come costanti.<\/p>\n<h3>2. Il riduttore<\/h3>\n<p>Vale la pena di parlare del riduttore in questa sede, visto il suo ruolo centrale accanto alle azioni. Il suo compito \u00e8 quello di specificare come lo stato deve cambiare in risposta alle istruzioni che riceve da un&#8217;azione. Se gli passate le istruzioni dell&#8217;azione e lo stato corrente, pu\u00f2 restituire un nuovo oggetto di stato e passarlo lungo la catena:<\/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>Notate che un riduttore deve essere una <a href=\"https:\/\/www.geeksforgeeks.org\/functional-programming-pure-and-impure-functions\/\" target=\"_blank\" rel=\"noopener noreferrer\">funzione pura<\/a> e non deve mutare lo stato che accetta (piuttosto deve restituirlo aggiornato). I riduttori e le azioni hanno una relazione simbiotica sotto molti aspetti, quindi \u00e8 importante capire come lavorano insieme.<\/p>\n<h3>3. I selettori<\/h3>\n<p>Per accedere allo stato corrente da un archivio registrato, avete bisogno di selettori. \u00c8 il modo principale per &#8220;esporre&#8221; lo stato dello store e aiutano a mantenere i vostri componenti disaccoppiati dalla struttura interna dello store:<\/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>Potete chiamare questi selettori con la funzione <code>select<\/code>:<\/p>\n<pre><code class=\"language-js\">const todoCount = select('my-plugin\/todos').getTodoCount();<\/code><\/pre>\n<p>Tuttavia, un selettore non invia i dati da nessuna parte: si limita a rivelarli e a fornirne l&#8217;accesso.<\/p>\n<p>I selettori possono ricevere tutti gli argomenti necessari per accedere con precisione allo stato. Il valore che restituisce \u00e8 il risultato di ci\u00f2 che questi argomenti ottengono all&#8217;interno del selettore che definite. Come per le azioni, potreste scegliere di avere un file separato per contenere tutti i vostri selettori, dato che potrebbero essere molti.<\/p>\n<h3>4. Controlli<\/h3>\n<p>Per guidare il flusso di esecuzione delle funzionalit\u00e0 del vostro sito &#8211; o per eseguire la logica al suo interno &#8211; si <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b76a258213bde016726e16949d76fed12c5a34d\/packages\/redux-routine\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">utilizzano i controlli<\/a>. Questi definiscono il comportamento dei flussi di esecuzione delle azioni. Sono considerati come gli assistenti del pacchetto dati di WordPress, in quanto lavorano come intermediari per raccogliere lo stato da passare ai risolutori.<\/p>\n<p>I controlli gestiscono anche gli effetti collaterali del vostro store, come le chiamate API o le interazioni con le API del browser. Permettono di mantenere puliti i riduttori, pur consentendo di gestire operazioni asincrone complesse:<\/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>Questo ciclo di recupero e restituzione dei dati \u00e8 fondamentale per l&#8217;intero processo. Ma senza una chiamata da parte di un&#8217;azione, non potrete utilizzare quei dati.<\/p>\n<h3>5. I resolver<\/h3>\n<p>I selettori espongono lo stato di uno store, ma non inviano esplicitamente i dati da nessuna parte. I resolver incontrano i selettori (e i controlli) per recuperare i dati. Come i controlli, possono anche gestire il recupero asincrono dei dati.<\/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>Il resolver si assicura che i dati richiesti siano disponibili nell&#8217;archivio prima di eseguire un selettore. Questa stretta connessione tra il resolver e il selettore comporta la necessaria corrispondenza dei nomi. In questo modo il pacchetto dati di WordPress pu\u00f2 capire quale risolutore invocare in base ai dati richiesti.<\/p>\n<p>Inoltre, il resolver ricever\u00e0 sempre gli stessi argomenti che vengono passati in una funzione del selettore e restituir\u00e0, render\u00e0 o invier\u00e0 oggetti azione.<\/p>\n<h2>Gestione degli errori quando si utilizza il pacchetto dati di WordPress<\/h2>\n<p>\u00c8 necessario implementare una corretta <a href=\"https:\/\/kinsta.com\/it\/blog\/errori-in-javascript\/\">gestione degli errori<\/a> quando si lavora con il pacchetto dati di WordPress. Se scegliete di gestire operazioni asincrone, di lavorare con <a href=\"https:\/\/kinsta.com\/it\/blog\/node-js\/\">implementazioni full stack<\/a> o di effettuare chiamate API, \u00e8 ancora pi\u00f9 importante.<\/p>\n<p>Ad esempio, se eseguite azioni che comportano operazioni asincrone, un blocco try-catch potrebbe essere una buona opzione:<\/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>Per i riduttori, potete gestire le azioni di errore e aggiornare lo stato:<\/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>Quando utilizzate i selettori, potete includere un controllo degli errori per gestire potenziali problemi e verificare la presenza di errori nei vostri componenti prima di utilizzare i dati:<\/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>Le funzioni <code>useSelect<\/code> e <code>useDispatch<\/code> permettono di gestire gli errori all&#8217;interno del pacchetto dati di WordPress. Con entrambe le funzioni potete inserire messaggi di errore personalizzati come argomenti.<\/p>\n<p>\u00c8 buona norma assicurarsi di centralizzare lo stato di errore durante la configurazione iniziale e di mantenere i confini degli errori a livello di componente. Anche la gestione degli errori per gli stati di caricamento vi aiuter\u00e0 a mantenere il codice chiaro e coerente.<\/p>\n<h2>Come integrare lo store dati di WordPress con il proprio sito<\/h2>\n<p>Il pacchetto dati di WordPress pu\u00f2 fare molto per aiutarvi a gestire gli stati. Mettere insieme tutto questo \u00e8 anche una considerazione pratica. Prendiamo ad esempio un sito web che mostra e aggiorna i dati finanziari in tempo reale.<\/p>\n<p>Il primo compito \u00e8 quello di creare uno store per i dati:<\/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>Questo processo imposta uno stato predefinito che include gli stati di errore e di caricamento, oltre alle azioni, ai riduttori e ai selettori. Una volta definiti questi elementi, potete registrare lo store.<\/p>\n<h3>Visualizzare i dati dello store<\/h3>\n<p>Una volta creato lo store, potete <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">creare un componente React<\/a> per visualizzare le informazioni al suo interno:<\/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>Questo componente integra gli hook <code>useSelect<\/code> e <code>useDispatch<\/code> (oltre ad altri) per gestire l&#8217;accesso ai dati, il dispatching delle azioni e la gestione del ciclo di vita del componente. Inoltre, imposta messaggi di errore e di stato di caricamento personalizzati, oltre a un po&#8217; di codice per visualizzare effettivamente il ticker. Una volta fatto questo, bisogna registrare il componente con WordPress.<\/p>\n<h3>Registrare il componente con WordPress<\/h3>\n<p>Senza la registrazione in WordPress, non potrete utilizzare i componenti che avete creato. Ci\u00f2 significa registrarlo come blocco, anche se potrebbe trattarsi di un widget se progettate per i <a href=\"https:\/\/kinsta.com\/it\/blog\/creare-tema-classico-wordpress\/\">temi classici<\/a>. Questo esempio utilizza un blocco.<\/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>Questo processo seguir\u00e0 l&#8217;approccio tipico per la registrazione dei blocchi all&#8217;interno di WordPress e non richiede alcuna implementazione o configurazione particolare.<\/p>\n<h3>Gestire gli aggiornamenti di stato e le interazioni con gli utenti<\/h3>\n<p>Una volta registrato il blocco, dovete gestire le interazioni degli utenti e gli aggiornamenti in tempo reale. A tal fine saranno necessari alcuni controlli interattivi, oltre a HTML e JavaScript personalizzati:<\/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>Per gli aggiornamenti in tempo reale, potete impostare un intervallo all&#8217;interno del componente React:<\/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>Questo approccio permette di mantenere i dati del vostro componente sincronizzati con il vostro store, mantenendo una chiara separation of concerns. Il pacchetto dati di WordPress gestir\u00e0 tutti gli aggiornamenti di stato, garantendo cos\u00ec la coerenza della vostra applicazione.<\/p>\n<h3>Rendering lato server<\/h3>\n<p>Infine, potete impostare il rendering lato server per assicurarvi che i dati dello stock siano aggiornati al caricamento della pagina. Questo richiede una certa <a href=\"https:\/\/kinsta.com\/it\/blog\/tutorial-php\/\">conoscenza di PHP<\/a>:<\/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>Questo approccio fornisce un&#8217;integrazione completa del vostro archivio dati con WordPress, gestendo tutto, dal rendering iniziale agli aggiornamenti in tempo reale e alle interazioni con gli utenti.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Il pacchetto dati di WordPress \u00e8 un modo complesso ma robusto per gestire gli stati dell&#8217;applicazione per i vostri progetti. Al di l\u00e0 dei concetti chiave, esiste una serie di funzioni, operatori, argomenti e molto altro ancora. Ricordate, per\u00f2, che non tutti i dati devono trovarsi in un archivio globale: lo stato locale dei componenti ha ancora un posto nel vostro codice.<\/p>\n<p>Pensate di utilizzare regolarmente il pacchetto dati di WordPress o avete un altro metodo per gestire lo stato? Condividete con noi le vostre opinioni nei commenti qui sotto.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gestire lo stato di qualsiasi applicazione WordPress, ovvero il modo in cui gestisce e organizza i dati, pu\u00f2 essere una vera sfida. Man mano che un &#8230;<\/p>\n","protected":false},"author":259,"featured_media":80121,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25873],"class_list":["post-80120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-sviluppo-wordpress"],"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>Pacchetto dati WordPress per gestire gli stati delle applicazioni<\/title>\n<meta name=\"description\" content=\"La gestione degli stati all&#039;interno di applicazioni complesse pu\u00f2 essere un problema. Ecco come utilizzare il pacchetto dati di WordPress per gestire gli stati delle app.\" \/>\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\/it\/blog\/pacchetto-dati-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come utilizzare il pacchetto dati di WordPress per gestire gli stati delle applicazioni\" \/>\n<meta property=\"og:description\" content=\"La gestione degli stati all&#039;interno di applicazioni complesse pu\u00f2 essere un problema. Ecco come utilizzare il pacchetto dati di WordPress per gestire gli stati delle app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-03T08:27:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-24T11:07:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"La gestione degli stati all&#039;interno di applicazioni complesse pu\u00f2 essere un problema. Ecco come utilizzare il pacchetto dati di WordPress per gestire gli stati delle app.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Come utilizzare il pacchetto dati di WordPress per gestire gli stati delle applicazioni\",\"datePublished\":\"2025-01-03T08:27:42+00:00\",\"dateModified\":\"2026-02-24T11:07:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/\"},\"wordCount\":2595,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/\",\"name\":\"Pacchetto dati WordPress per gestire gli stati delle applicazioni\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"datePublished\":\"2025-01-03T08:27:42+00:00\",\"dateModified\":\"2026-02-24T11:07:21+00:00\",\"description\":\"La gestione degli stati all'interno di applicazioni complesse pu\u00f2 essere un problema. Ecco come utilizzare il pacchetto dati di WordPress per gestire gli stati delle app.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppo di WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come utilizzare il pacchetto dati di WordPress per gestire gli stati delle applicazioni\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Pacchetto dati WordPress per gestire gli stati delle applicazioni","description":"La gestione degli stati all'interno di applicazioni complesse pu\u00f2 essere un problema. Ecco come utilizzare il pacchetto dati di WordPress per gestire gli stati delle app.","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\/it\/blog\/pacchetto-dati-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Come utilizzare il pacchetto dati di WordPress per gestire gli stati delle applicazioni","og_description":"La gestione degli stati all'interno di applicazioni complesse pu\u00f2 essere un problema. Ecco come utilizzare il pacchetto dati di WordPress per gestire gli stati delle app.","og_url":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2025-01-03T08:27:42+00:00","article_modified_time":"2026-02-24T11:07:21+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"La gestione degli stati all'interno di applicazioni complesse pu\u00f2 essere un problema. Ecco come utilizzare il pacchetto dati di WordPress per gestire gli stati delle app.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Steve Bonisteel","Tempo di lettura stimato":"15 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Come utilizzare il pacchetto dati di WordPress per gestire gli stati delle applicazioni","datePublished":"2025-01-03T08:27:42+00:00","dateModified":"2026-02-24T11:07:21+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/"},"wordCount":2595,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state.png","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/","name":"Pacchetto dati WordPress per gestire gli stati delle applicazioni","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state.png","datePublished":"2025-01-03T08:27:42+00:00","dateModified":"2026-02-24T11:07:21+00:00","description":"La gestione degli stati all'interno di applicazioni complesse pu\u00f2 essere un problema. Ecco come utilizzare il pacchetto dati di WordPress per gestire gli stati delle app.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/01\/wordpress-data-package-manage-application-state.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/pacchetto-dati-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppo di WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Come utilizzare il pacchetto dati di WordPress per gestire gli stati delle applicazioni"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/80120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=80120"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/80120\/revisions"}],"predecessor-version":[{"id":83337,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/80120\/revisions\/83337"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80120\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80120\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80120\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80120\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80120\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80120\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80120\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80120\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80120\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/80121"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=80120"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=80120"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=80120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}