{"id":70736,"date":"2025-01-03T05:29:59","date_gmt":"2025-01-03T08:29:59","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=70736&#038;preview=true&#038;preview_id=70736"},"modified":"2025-01-13T04:45:03","modified_gmt":"2025-01-13T07:45:03","slug":"pacote-de-dados-do-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/","title":{"rendered":"Como Usar o Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos"},"content":{"rendered":"<p>Gerenciar o estado de <em>qualquer<\/em> aplicativo WordPress &#8211; ou seja, como ele lida e organiza os dados \u2014 pode ser desafiador. \u00c0 medida que o projeto cresce, acompanhar o fluxo de dados e garantir atualiza\u00e7\u00f5es consistentes entre os componentes se torna cada vez mais dif\u00edcil. O pacote de dados do WordPress pode ajudar nesse aspecto, pois oferece uma solu\u00e7\u00e3o robusta para o gerenciamento de estado.<\/p>\n<p>Este artigo analisa o pacote de dados do WordPress, explorando seus principais conceitos, estrat\u00e9gias de implementa\u00e7\u00e3o e pr\u00e1ticas recomendadas.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Tabela de Conte\u00fados\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3>Introdu\u00e7\u00e3o ao pacote de dados do WordPress<\/h3>\n<p>O <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/\" target=\"_blank\" rel=\"noopener noreferrer\">pacote de dados do WordPress<\/a> &#8211; oficialmente <code>@wordpress\/data<\/code> &#8211; \u00e9 uma biblioteca de gerenciamento de estado em JavaScript (ES2015 e superior) que oferece uma maneira previs\u00edvel e centralizada de gerenciar o estado do aplicativo. A implementa\u00e7\u00e3o correta pode ajudar a facilitar a cria\u00e7\u00e3o de interfaces de usu\u00e1rio complexas e a lidar com o fluxo de dados em todo o seu aplicativo.<\/p>\n<p>O pacote de dados do WordPress se inspira no <a href=\"https:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Redux<\/a>, uma biblioteca de gerenciamento de estado popular no <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-de-componentes-react\/#20-react-redux\">ecossistema React<\/a>.<\/p>\n<figure id=\"attachment_188531\" aria-describedby=\"caption-attachment-188531\" style=\"width: 960px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-188531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/the-redux-website-home-page.png\" alt=\"A p\u00e1gina inicial do Redux apresenta uma se\u00e7\u00e3o de cabe\u00e7alho roxa que cont\u00e9m o logotipo e o t\u00edtulo do Redux, juntamente com um slogan e um bot\u00e3o **Get Started**. Abaixo disso, h\u00e1 quatro se\u00e7\u00f5es principais com \u00edcones que destacam os recursos. Cada se\u00e7\u00e3o inclui um texto descritivo explicando as capacidades do Redux, como gerenciamento de estado de aplica\u00e7\u00f5es, ferramentas de depura\u00e7\u00e3o e compatibilidade com ecossistemas. A barra de navega\u00e7\u00e3o superior cont\u00e9m links para v\u00e1rias outras p\u00e1ginas do site e funcionalidade de busca.\" width=\"960\" height=\"594\"><figcaption id=\"caption-attachment-188531\" class=\"wp-caption-text\">O site oficial do Redux.<\/figcaption><\/figure>\n<p>Aqui, o m\u00f3dulo de dados funciona no ambiente do WordPress e fornece integra\u00e7\u00f5es com APIs e funcionalidades espec\u00edficas do WordPress. Se voc\u00ea cria algo no <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">Editor de Blocos do WordPress<\/a> \u2014 ou precisa oferecer suporte a ele \u2014 o pacote ser\u00e1 crucial para gerenciar seu estado. Usando as mesmas ferramentas e padr\u00f5es em seus pr\u00f3prios plugins e temas, voc\u00ea pode criar uma experi\u00eancia de desenvolvimento mais consistente e familiar.<\/p>\n<h3>A rela\u00e7\u00e3o do pacote com o Redux<\/h3>\n<p>Embora o pacote de dados do WordPress se inspire no Redux, ele n\u00e3o \u00e9 uma porta direta. H\u00e1 muitas adapta\u00e7\u00f5es para se adequar ao ecossistema do WordPress, com algumas diferen\u00e7as importantes entre as duas solu\u00e7\u00f5es:<\/p>\n<ul>\n<li>O pacote de dados foi projetado para funcionar perfeitamente com as APIs e a funcionalidade do WordPress, o que o Redux vanilla n\u00e3o pode fazer sem essa adapta\u00e7\u00e3o.<\/li>\n<li>Em compara\u00e7\u00e3o com o Redux, o pacote de dados oferece uma API mais simplificada. Isso pode facilitar os primeiros passos.<\/li>\n<li>Ao contr\u00e1rio do Redux, o pacote de dados inclui suporte integrado para <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-node-js\/#5-async\">a\u00e7\u00f5es ass\u00edncronas<\/a>. Se voc\u00ea trabalha com a API REST do WordPress, isso ser\u00e1 \u00fatil.<\/li>\n<\/ul>\n<p>O pacote de dados do WordPress tamb\u00e9m tem algumas compara\u00e7\u00f5es com a <a href=\"https:\/\/kinsta.com\/pt\/blog\/rest-api-vs-web-api\/\">API REST<\/a>. Embora ambos lidem com o gerenciamento de dados, eles t\u00eam finalidades diferentes:<\/p>\n<ul>\n<li>A API REST do WordPress oferece uma maneira de voc\u00ea interagir com os dados do WordPress por HTTP. Voc\u00ea a usar\u00e1 para aplicativos externos, <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless\/\">configura\u00e7\u00f5es do WordPress headless<\/a> e em qualquer lugar em que precise <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-rest-api\/\">recuperar e manipular dados<\/a>.<\/li>\n<li>O pacote de dados do WordPress fornece um armazenamento centralizado para dados e estado da interface do usu\u00e1rio. \u00c9 uma maneira de lidar com o fluxo de dados e as atualiza\u00e7\u00f5es em seu aplicativo.<\/li>\n<\/ul>\n<p>Em muitos casos, voc\u00ea usar\u00e1 os dois juntos: A API REST para buscar e atualizar dados no servidor e o pacote de dados do WordPress para gerenciar esses dados no aplicativo.<\/p>\n<h2>Principais conceitos e terminologia do pacote de dados do WordPress<\/h2>\n<p>O pacote de dados do WordPress oferece uma maneira intuitiva de gerenciar estados. Isso se refere aos dados em um store. Ele representa a condi\u00e7\u00e3o atual do seu aplicativo e pode incluir o estado da interface do usu\u00e1rio (por exemplo, se h\u00e1 um modal aberto) e o estado dos dados (como uma lista de artigos).<\/p>\n<figure id=\"attachment_188331\" aria-describedby=\"caption-attachment-188331\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-188331 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/post-list.png\" alt=\"O estado dos seus dados de artigos \u00e9 uma \u00e1rea que o pacote de dados do WordPress gerencia.\" width=\"1200\" height=\"721\"><figcaption id=\"caption-attachment-188331\" class=\"wp-caption-text\">O estado dos seus dados de artigos \u00e9 uma \u00e1rea que o pacote de dados do WordPress gerencia.<\/figcaption><\/figure>\n<p>Nesse contexto, um store \u00e9 o n\u00facleo central do pacote de dados do WordPress. Ele armazena todo o estado do site e fornece os m\u00e9todos necess\u00e1rios para acessar e atualizar esse estado. No WordPress, \u00e9 poss\u00edvel ter m\u00faltiplos stores, cada um respons\u00e1vel por uma \u00e1rea espec\u00edfica do seu site.<\/p>\n<p>Para gerenciar esses stores, voc\u00ea precisa de um registry. Esse objeto central oferece m\u00e9todos para registrar novos stores e acessar os existentes. Um registry armazenar\u00e1 os stores, e esses stores armazenar\u00e3o o estado do seu aplicativo.<\/p>\n<p>Existem algumas maneiras de trabalhar com estados:<\/p>\n<ul>\n<li><strong>Actions<\/strong> descrevem as mudan\u00e7as em um estado. S\u00e3o objetos simples em JavaScript e a \u00fanica forma de acionar atualiza\u00e7\u00f5es no estado. Normalmente, actions t\u00eam uma propriedade <code>type<\/code>, que descreve a a\u00e7\u00e3o, e podem incluir dados adicionais.<\/li>\n<li><strong>Selectors<\/strong> extraem partes espec\u00edficas do estado do store. Essas fun\u00e7\u00f5es permitem que voc\u00ea acesse dados de estado sem a necessidade de intera\u00e7\u00e3o direta com a estrutura do store. Resolvers est\u00e3o relacionados e lidam com a <a href=\"https:\/\/kinsta.com\/courses\/speed-up-wordpress\/lazy-loading-async-defer\/\">busca ass\u00edncrona de dados<\/a>. Eles garantem que voc\u00ea possa acessar os dados necess\u00e1rios em um store antes de executar um selector.<\/li>\n<li><strong>Reducers<\/strong> especificam como o estado deve mudar em resposta para actions. Eles recebem o estado atual e uma a\u00e7\u00e3o como argumentos e retornam um novo objeto de estado. Fun\u00e7\u00f5es de controle permitem que os reducers lidem com opera\u00e7\u00f5es ass\u00edncronas complexas sem efeitos colaterais.<\/li>\n<\/ul>\n<p>Voc\u00ea precisa entender esses conceitos fundamentais, pois todos eles trabalham juntos para criar um sistema robusto de gerenciamento de estado com lojas em seu cora\u00e7\u00e3o.<\/p>\n<h2>Stores: O n\u00facleo central do pacote de dados do WordPress<\/h2>\n<p>Os stores s\u00e3o os cont\u00eaineres para o estado do seu aplicativo e fornecem os m\u00e9todos para interagir com ele. O pacote de dados do WordPress re\u00fane alguns outros pacotes, e cada um deles registra stores para o diret\u00f3rio de blocos, <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Editor de Blocos<\/a>, n\u00facleo, edi\u00e7\u00e3o de artigos e mais.<\/p>\n<p>Cada store ter\u00e1 um namespace \u00fanico, como <code>core<\/code>, <code>core\/editor<\/code> e <code>core\/notices<\/code>. Plugins de terceiros tamb\u00e9m registrar\u00e3o stores, ent\u00e3o \u00e9 necess\u00e1rio escolher namespaces \u00fanicos para evitar conflitos. No entanto, os stores que voc\u00ea registrar estar\u00e3o no registro padr\u00e3o.<\/p>\n<p>Esse objeto central tem algumas responsabilidades:<\/p>\n<ul>\n<li>Registrar novos stores.<br \/>\nFornecer acesso aos stores existentes.<br \/>\nGerenciar assinaturas para mudan\u00e7as no estado.<\/li>\n<\/ul>\n<p>Embora voc\u00ea n\u00e3o interaja diretamente com o registry com frequ\u00eancia, \u00e9 importante entender seu papel na organiza\u00e7\u00e3o do gerenciamento de estado pelo pacote de dados no WordPress.<\/p>\n<h3>Intera\u00e7\u00e3o b\u00e1sica com os data stores do WordPress<\/h3>\n<p>Se voc\u00ea usa JavaScript <a href=\"https:\/\/www.javascripttutorial.net\/es6\/\" target=\"_blank\" rel=\"noopener noreferrer\">ES2015+<\/a> e est\u00e1 trabalhando com um plugin ou tema do WordPress, pode inclu\u00ed-lo como uma depend\u00eancia:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/data --save<\/code><\/pre>\n<p>No seu c\u00f3digo, voc\u00ea importar\u00e1 as fun\u00e7\u00f5es necess\u00e1rias do pacote na parte superior do arquivo:<\/p>\n<pre><code class=\"language-bash\">import { select, dispatch, subscribe } from '@wordpress\/data';<\/code><\/pre>\n<p>Para interagir com os stores existentes no WordPress, voc\u00ea utilizar\u00e1 algumas das fun\u00e7\u00f5es importadas. Por exemplo, para acessar dados de estado com <code>select<\/code>:<\/p>\n<pre><code class=\"language-js\">const posts = select('core').getPosts();<\/code><\/pre>\n<p>O mesmo acontece com o envio de actions:<\/p>\n<pre><code class=\"language-js\">dispatch('core').savePost(postData);<\/code><\/pre>\n<p>A assinatura de mudan\u00e7as de estado utiliza um formato ligeiramente diferente, mas o conceito permanece o mesmo:<\/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>No entanto, voc\u00ea nem sempre trabalhar\u00e1 com os stores padr\u00e3o. Muitas vezes, ser\u00e1 necess\u00e1rio usar stores adicionais existentes ou registrar seus pr\u00f3prios.<\/p>\n<h2>Como registrar um store de dados no WordPress<\/h2>\n<p>Definir a configura\u00e7\u00e3o do seu store e registr\u00e1-lo no pacote de dados do WordPress come\u00e7a com a importa\u00e7\u00e3o da fun\u00e7\u00e3o <code>register<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nimport { createReduxStore, register } from '@wordpress\/data';\n\u2026<\/code><\/pre>\n<p>Isso requer um \u00fanico argumento: O descriptor do seu store. O pr\u00f3ximo passo \u00e9 definir um estado padr\u00e3o para o store, configurando os valores iniciais:<\/p>\n<pre><code class=\"language-js\">\u2026\nconst DEFAULT_STATE = {\n  todos: [],\n};\n\u2026<\/code><\/pre>\n<p>Em seguida, crie um objeto <code>actions<\/code>, defina uma fun\u00e7\u00e3o <code>reducer<\/code> para tratar as atualiza\u00e7\u00f5es de estado e crie um objeto <code>selectors<\/code> com fun\u00e7\u00f5es para acessar os dados de estado:<\/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>Para criar a configura\u00e7\u00e3o do store, defina-a usando o objeto <code>createReduxStore<\/code>. Isso inicializar\u00e1 as actions, selectors, control e outras propriedades do seu 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>O requisito m\u00ednimo desse objeto \u00e9 um reducer, que define a estrutura do estado e como ele muda em resposta a outras a\u00e7\u00f5es. Por fim, registre o store chamando o descriptor que voc\u00ea definiu com o <code>createReduxStore<\/code>:<\/p>\n<pre><code class=\"language-js\">register(store);<\/code><\/pre>\n<p>Agora voc\u00ea pode interagir com seu store personalizado como faria com outros:<\/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>A chave para usar o pacote de dados do WordPress \u00e9 como voc\u00ea usa as diferentes propriedades e objetos \u00e0 sua disposi\u00e7\u00e3o.<\/p>\n<h2>Detalhando as cinco propriedades do armazenamento de dados do WordPress<\/h2>\n<p>Grande parte do uso do pacote de dados do WordPress acontece &#8220;de tr\u00e1s para frente&#8221; &#8211; definindo propriedades de baixo n\u00edvel do armazenamento de dados antes do pr\u00f3prio armazenamento. O objeto <code>createReduxStore<\/code> \u00e9 um exemplo perfeito, pois <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#createreduxstore\" target=\"_blank\" rel=\"noopener noreferrer\">re\u00fane<\/a> todas as defini\u00e7\u00f5es que voc\u00ea faz para criar o descriptor que usa para registrar um armazenamento:<\/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>Essas outras propriedades tamb\u00e9m precisam de instala\u00e7\u00e3o e configura\u00e7\u00e3o.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Actions<\/h3>\n<p>As actions s\u00e3o a principal maneira de acionar mudan\u00e7as de estado no seu store. Elas s\u00e3o objetos simples em JavaScript que descrevem o que deve acontecer. Por isso, \u00e9 uma boa pr\u00e1tica defini-las primeiro, j\u00e1 que voc\u00ea pode decidir quais estados deseja manipular.<\/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\">Os criadores de actions<\/a> podem receber argumentos opcionais e retornar um objeto que ser\u00e1 enviado ao reducer definido:<\/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 voc\u00ea passar um descriptor de store, poder\u00e1 despachar os criadores de actions e atualizar o valor do estado:<\/p>\n<pre><code class=\"language-js\">dispatch('my-plugin\/todos').updateStockPrice('\u00a5', '150.37');<\/code><\/pre>\n<p>Considere os objetos de action como instru\u00e7\u00f5es para o reducer sobre como realizar mudan\u00e7as no estado. No m\u00ednimo, \u00e9 recomend\u00e1vel definir actions para criar, atualizar, ler e excluir (CRUD). Voc\u00ea tamb\u00e9m pode criar um arquivo JavaScript separado para armazenar os tipos de action e organiz\u00e1-los em um objeto, especialmente se forem definidos como constantes.<\/p>\n<h3>2. Reducer<\/h3>\n<p>O reducer tem um papel central junto \u00e0s actions. Sua fun\u00e7\u00e3o \u00e9 especificar como o estado deve mudar em resposta \u00e0s instru\u00e7\u00f5es recebidas de uma action. Quando recebe as instru\u00e7\u00f5es de uma action e o estado atual, ele retorna um novo objeto de estado e o passa adiante na chain:<\/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>\u00c9 importante lembrar que um reducer deve ser uma <a href=\"https:\/\/www.geeksforgeeks.org\/functional-programming-pure-and-impure-functions\/\">fun\u00e7\u00e3o pura<\/a>. Ele n\u00e3o deve alterar o estado original recebido, mas sim retornar uma c\u00f3pia atualizada com as mudan\u00e7as aplicadas. Os reducers e as actions possuem uma rela\u00e7\u00e3o simbi\u00f3tica, o que torna essencial compreender como eles trabalham juntos para criar um fluxo eficiente de gerenciamento de estado.<\/p>\n<h3>3. Selectors<\/h3>\n<p>Os selectors s\u00e3o utilizados para acessar o estado atual de um store registrado. Eles s\u00e3o a principal forma de &#8220;expor&#8221; o estado do store, ajudando a manter os componentes desacoplados da estrutura interna do 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>Voc\u00ea pode chamar esses selectors com a fun\u00e7\u00e3o <code>select<\/code>:<\/p>\n<pre><code class=\"language-js\">const todoCount = select('my-plugin\/todos').getTodoCount();<\/code><\/pre>\n<p>Um selector n\u00e3o envia dados para lugar algum; ele apenas os revela e fornece acesso.<\/p>\n<p>Os selectors podem receber quantos argumentos forem necess\u00e1rios para acessar o estado com precis\u00e3o. O valor retornado ser\u00e1 o resultado do que esses argumentos definirem dentro do selector. Assim como nas actions, voc\u00ea pode criar um arquivo separado para armazenar todos os seus selectors, especialmente se houver muitos.<\/p>\n<h3>4. Controls<\/h3>\n<p>Os <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b76a258213bde016726e16949d76fed12c5a34d\/packages\/redux-routine\/README.md\">controls<\/a> guiam o fluxo de execu\u00e7\u00e3o das funcionalidades do site ou executam a l\u00f3gica dentro delas. Eles definem o comportamento dos fluxos de execu\u00e7\u00e3o das actions. No pacote de dados do WordPress, os controls funcionam como intermedi\u00e1rios, reunindo o estado para passar aos resolvers.<\/p>\n<p>Os controls tamb\u00e9m lidam com efeitos colaterais no seu store, como chamadas de APIs ou intera\u00e7\u00f5es com APIs do navegador. Eles permitem manter os reducers limpos, enquanto possibilitam lidar com opera\u00e7\u00f5es ass\u00edncronas complexas:<\/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>Este ciclo de busca e retorno de dados \u00e9 essencial para todo o processo. No entanto, sem uma chamada a partir de uma action, voc\u00ea n\u00e3o poder\u00e1 usar esses dados.<\/p>\n<h3>5. Resolvers<\/h3>\n<p>Os selectors exp\u00f5em o estado de um store, mas n\u00e3o enviam os dados explicitamente para lugar algum. \u00c9 a\u00ed que entram os resolvers, que encontram os selectors (e os controls) para buscar os dados. Assim como os controls, os resolvers tamb\u00e9m podem lidar com busca ass\u00edncrona de dados:<\/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>O resolver garante que os dados solicitados estejam dispon\u00edveis no store antes de executar um selector. Essa conectividade entre o resolver e o selector exige que seus nomes correspondam, permitindo ao pacote de dados do WordPress identificar qual resolver invocar com base nos dados solicitados.<\/p>\n<p>Al\u00e9m disso, o resolver sempre receber\u00e1 os mesmos argumentos que voc\u00ea passa para uma fun\u00e7\u00e3o de selector, e tamb\u00e9m pode retornar, produzir ou despachar objetos de action.<\/p>\n<h2>Tratamento de erros ao usar o pacote de dados do WordPress<\/h2>\n<p>\u00c9 fundamental implementar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/erros-no-javascript\/\">tratamento de erros adequado<\/a> ao trabalhar com o pacote de dados do WordPress. Isso \u00e9 especialmente importante ao lidar com opera\u00e7\u00f5es ass\u00edncronas, <a href=\"https:\/\/kinsta.com\/courses\/node-js-full-stack-developer\/error-handling\/\">implanta\u00e7\u00f5es full stack<\/a> ou chamadas de API.<\/p>\n<p>Por exemplo, se voc\u00ea despachar actions que envolvem opera\u00e7\u00f5es ass\u00edncronas, o uso de um bloco try-catch pode ser uma boa op\u00e7\u00e3o:<\/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>Nos reducers, voc\u00ea pode lidar com a\u00e7\u00f5es de erro e atualizar o estado:<\/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>Ao usar selectors, voc\u00ea pode incluir verifica\u00e7\u00f5es de erro para lidar com problemas potenciais e ent\u00e3o verificar a presen\u00e7a de erros nos seus componentes antes de usar os dados. Isso garante que erros sejam identificados e tratados de forma preventiva, evitando comportamentos inesperados no aplicativo.<\/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>As fun\u00e7\u00f5es <code>useSelect<\/code> e <code>useDispatch<\/code> d\u00e3o a voc\u00ea muito poder para lidar com erros no pacote de dados do WordPress. Com ambas, voc\u00ea pode passar mensagens de erro personalizadas como argumentos.<\/p>\n<p>\u00c9 uma boa pr\u00e1tica garantir que voc\u00ea centralize seu estado de erro durante a configura\u00e7\u00e3o inicial e manter limites de erros no n\u00edvel do componente. Implementar o tratamento de erros para estados de carregamento tamb\u00e9m ajuda a manter o c\u00f3digo claro e consistente.<\/p>\n<h2>Como integrar o data store do WordPress ao seu site<\/h2>\n<p>O pacote de dados do WordPress oferece muitas funcionalidades para ajudar a gerenciar estados. Consolidar tudo isso \u00e9 uma considera\u00e7\u00e3o pr\u00e1tica. Vamos analisar um exemplo de um ticker financeiro que exibe e atualiza dados financeiros em tempo real.<\/p>\n<p>A primeira tarefa \u00e9 criar um store para seus dados:<\/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>Esse processo configura um estado padr\u00e3o que inclui estados de erro e de carregamento, juntamente com suas actions, reducers e selectors. Ap\u00f3s definir esses elementos, voc\u00ea pode registrar o store.<\/p>\n<h3>Exibindo os dados do store<\/h3>\n<p>Com o store configurado, voc\u00ea pode <a href=\"https:\/\/kinsta.com\/pt\/base-de-conhecimento\/o-que-e-react-js\/\">criar um componente React<\/a> para exibir as informa\u00e7\u00f5es contidas nele:<\/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>Este componente utiliza os hooks <code>useSelect<\/code> e <code>useDispatch<\/code> (al\u00e9m de outros) para lidar com acesso aos dados, despachar a\u00e7\u00f5es e gerenciar o ciclo de vida do componente. Ele tamb\u00e9m define mensagens personalizadas para estados de erro e carregamento, al\u00e9m de incluir o c\u00f3digo para exibir o ticker. Com isso, o pr\u00f3ximo passo \u00e9 registrar o componente no WordPress.<\/p>\n<h3>Registrando o componente no WordPress<\/h3>\n<p>Sem o registro no WordPress, voc\u00ea n\u00e3o poder\u00e1 usar os componentes criados. Isso significa registr\u00e1-lo como um Bloco, embora tamb\u00e9m possa ser registrado como um widget caso voc\u00ea esteja desenvolvendo para <a href=\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/\">Temas Cl\u00e1ssicos<\/a>. Este exemplo utiliza um Bloco:<\/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>Esse processo segue o m\u00e9todo t\u00edpico para registrar Blocos no WordPress e n\u00e3o exige implementa\u00e7\u00f5es ou configura\u00e7\u00f5es especiais.<\/p>\n<h3>Gerenciando atualiza\u00e7\u00f5es de estado e intera\u00e7\u00f5es do usu\u00e1rio<\/h3>\n<p>Depois de registrar o bloco, voc\u00ea precisa gerenciar as intera\u00e7\u00f5es do usu\u00e1rio e as atualiza\u00e7\u00f5es em tempo real. Para isso, voc\u00ea precisar\u00e1 de alguns controles interativos, al\u00e9m de HTML e JavaScript personalizados:<\/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>Para atualiza\u00e7\u00f5es em tempo real, voc\u00ea pode configurar um intervalo no 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>Essa abordagem mant\u00e9m os dados do componente sincronizados com o store, enquanto preserva uma separa\u00e7\u00e3o clara de responsabilidades. O pacote de dados do WordPress gerenciar\u00e1 todas as atualiza\u00e7\u00f5es de estado, garantindo consist\u00eancia no aplicativo.<\/p>\n<h3>Renderiza\u00e7\u00e3o no lado do servidor<\/h3>\n<p>Por fim, voc\u00ea pode configurar a renderiza\u00e7\u00e3o no lado do servidor para garantir que os dados de estoque estejam atualizados no carregamento da p\u00e1gina. Isso requer algum <a href=\"https:\/\/kinsta.com\/pt\/blog\/tutoriais-de-php\/\">conhecimento de 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>Essa abordagem integra completamente o seu data store ao WordPress, lidando com tudo, desde a renderiza\u00e7\u00e3o inicial at\u00e9 atualiza\u00e7\u00f5es em tempo real e intera\u00e7\u00f5es do usu\u00e1rio.<\/p>\n<h2>Resumo<\/h2>\n<p>O pacote de dados do WordPress \u00e9 uma ferramenta complexa, mas poderosa, para gerenciar estados de aplicativos em seus projetos. Al\u00e9m dos conceitos-chave, existe uma vasta gama de fun\u00e7\u00f5es, operadores, argumentos e outros elementos a explorar. No entanto, lembre-se de que nem todos os dados precisam estar em um store global \u2014 o estado local dos componentes ainda tem seu lugar no c\u00f3digo.<\/p>\n<p>Voc\u00ea se imagina usando o pacote de dados do WordPress regularmente, ou prefere outro m\u00e9todo de gerenciamento de estado? Compartilhe sua opini\u00e3o conosco nos coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gerenciar o estado de qualquer aplicativo WordPress &#8211; ou seja, como ele lida e organiza os dados \u2014 pode ser desafiador. \u00c0 medida que o projeto &#8230;<\/p>\n","protected":false},"author":259,"featured_media":70737,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":""},"tags":[],"topic":[1026],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.1.2 (Yoast SEO v19.14) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos<\/title>\n<meta name=\"description\" content=\"Gerenciar estados em aplicativos complexos pode ser desafiador. Vamos explorar como usar o pacote de dados do WordPress para gerenciar estados de aplicativos.\" \/>\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\/pt\/blog\/pacote-de-dados-do-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Usar o Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos\" \/>\n<meta property=\"og:description\" content=\"Gerenciar estados em aplicativos complexos pode ser desafiador. Vamos explorar como usar o pacote de dados do WordPress para gerenciar estados de aplicativos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-03T08:29:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-13T07:45:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Gerenciar estados em aplicativos complexos pode ser desafiador. Vamos explorar como usar o pacote de dados do WordPress para gerenciar estados de aplicativos.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Como Usar o Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos\",\"datePublished\":\"2025-01-03T08:29:59+00:00\",\"dateModified\":\"2025-01-13T07:45:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/\"},\"wordCount\":2777,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/\",\"name\":\"Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"datePublished\":\"2025-01-03T08:29:59+00:00\",\"dateModified\":\"2025-01-13T07:45:03+00:00\",\"description\":\"Gerenciar estados em aplicativos complexos pode ser desafiador. Vamos explorar como usar o pacote de dados do WordPress para gerenciar estados de aplicativos.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Usar o Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\",\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/twitter.com\/kinsta_pt\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos","description":"Gerenciar estados em aplicativos complexos pode ser desafiador. Vamos explorar como usar o pacote de dados do WordPress para gerenciar estados de aplicativos.","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\/pt\/blog\/pacote-de-dados-do-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Usar o Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos","og_description":"Gerenciar estados em aplicativos complexos pode ser desafiador. Vamos explorar como usar o pacote de dados do WordPress para gerenciar estados de aplicativos.","og_url":"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2025-01-03T08:29:59+00:00","article_modified_time":"2025-01-13T07:45:03+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/wordpress-data-package-manage-application-state.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"Gerenciar estados em aplicativos complexos pode ser desafiador. Vamos explorar como usar o pacote de dados do WordPress para gerenciar estados de aplicativos.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Steve Bonisteel","Tempo estimado de leitura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Como Usar o Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos","datePublished":"2025-01-03T08:29:59+00:00","dateModified":"2025-01-13T07:45:03+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/"},"wordCount":2777,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/","name":"Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"datePublished":"2025-01-03T08:29:59+00:00","dateModified":"2025-01-13T07:45:03+00:00","description":"Gerenciar estados em aplicativos complexos pode ser desafiador. Vamos explorar como usar o pacote de dados do WordPress para gerenciar estados de aplicativos.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/pacote-de-dados-do-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"Como Usar o Pacote de Dados do WordPress para Gerenciar Estados de Aplicativos"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta","https:\/\/www.facebook.com\/kinstapt\/","https:\/\/twitter.com\/kinsta_pt"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/70736"}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=70736"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/70736\/revisions"}],"predecessor-version":[{"id":70806,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/70736\/revisions\/70806"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70736\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70736\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70736\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70736\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70736\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70736\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70736\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70736\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70736\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/70737"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=70736"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=70736"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=70736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}