{"id":77633,"date":"2025-01-03T09:26:10","date_gmt":"2025-01-03T08:26:10","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=77633&#038;preview=true&#038;preview_id=77633"},"modified":"2026-02-24T12:02:36","modified_gmt":"2026-02-24T11:02:36","slug":"paquete-de-datos-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/","title":{"rendered":"C\u00f3mo utilizar el paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n"},"content":{"rendered":"<p>Gestionar el estado de <em>cualquier<\/em> aplicaci\u00f3n de WordPress \u2014 c\u00f3mo maneja y organiza los datos \u2014 puede ser todo un reto. A medida que tu proyecto crece, controlar el flujo de datos y garantizar actualizaciones coherentes en todos los componentes resulta cada vez m\u00e1s dif\u00edcil. El paquete de datos de WordPress puede ayudarte en este sentido, ya que proporciona una soluci\u00f3n s\u00f3lida para la gesti\u00f3n del estado.<\/p>\n<p>Este art\u00edculo analiza el paquete de datos de WordPress, explorando sus conceptos clave, estrategias de implementaci\u00f3n y mejores pr\u00e1cticas.<\/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>Presentaci\u00f3n del paquete de datos de WordPress<\/h2>\n<p>El <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/\">paquete de datos de WordPress<\/a> \u2014 oficialmente <code>@wordpress\/data<\/code> \u2014 es una biblioteca de gesti\u00f3n de estados de JavaScript (ES2015 y versiones superiores) que proporciona una forma predecible y centralizada de gestionar el estado de las aplicaciones. Una implementaci\u00f3n adecuada puede facilitar la creaci\u00f3n de interfaces de usuario complejas y la gesti\u00f3n del flujo de datos en tu aplicaci\u00f3n.<\/p>\n<p>El paquete de datos de WordPress se inspira en <a href=\"https:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Redux<\/a>, una popular biblioteca de gesti\u00f3n de estados del <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-de-componentes-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=\"wp-image-188531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/the-redux-website-home-page.png\" alt=\"La p\u00e1gina de inicio de Redux, con una secci\u00f3n de cabecera morada que contiene el logotipo y el t\u00edtulo de Redux, junto con un eslogan y un bot\u00f3n \"Empezar\". Debajo hay cuatro secciones de funcionalidades clave con iconos. Cada secci\u00f3n incluye un texto descriptivo que explica las capacidades de Redux para la gesti\u00f3n del estado de las aplicaciones, las herramientas de depuraci\u00f3n y la compatibilidad con el ecosistema. La barra de navegaci\u00f3n superior contiene enlaces a otras p\u00e1ginas del sitio y funciones de b\u00fasqueda.\" width=\"960\" height=\"594\"><figcaption id=\"caption-attachment-188531\" class=\"wp-caption-text\">El sitio web oficial de Redux.<\/figcaption><\/figure>\n<p>Aqu\u00ed, el m\u00f3dulo de datos funciona dentro del entorno de WordPress y proporciona integraciones con funcionalidades y API espec\u00edficas de WordPress. Si construyes para el <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">Editor de Bloques de WordPress<\/a> \u2014 o es algo que tienes previsto soportar \u2014 el paquete ser\u00e1 crucial para gestionar su estado. Si utilizas las mismas herramientas y patrones en tus propios plugins y temas, podr\u00e1s crear una experiencia de desarrollo m\u00e1s coherente y familiar.<\/p>\n<h3>La relaci\u00f3n del paquete con Redux<\/h3>\n<p>Aunque el paquete de datos de WordPress se inspira en Redux, no es una adaptaci\u00f3n directa. Hay muchas adaptaciones para ajustarse al ecosistema de WordPress, con algunas diferencias clave entre ambas soluciones:<\/p>\n<ul>\n<li>El paquete de datos est\u00e1 dise\u00f1ado para funcionar a la perfecci\u00f3n con las APIs y la funcionalidad de WordPress, algo que Redux vanilla no puede hacer sin esa adaptaci\u00f3n.<\/li>\n<li>En comparaci\u00f3n con Redux, el paquete de datos proporciona una API m\u00e1s racionalizada. Esto puede facilitar la puesta en marcha.<\/li>\n<li>A diferencia de Redux, el paquete de datos incluye soporte integrado para <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-node-js\/#5-async\">acciones as\u00edncronas<\/a>. Si trabajas con la API REST de WordPress, esto te resultar\u00e1 \u00fatil.<\/li>\n<\/ul>\n<p>El paquete de datos de WordPress tambi\u00e9n tiene algunas comparaciones con la <a href=\"https:\/\/kinsta.com\/es\/blog\/api-rest-vs-api-web\/\">API REST<\/a>. Aunque ambos se ocupan de la gesti\u00f3n de datos, tienen prop\u00f3sitos diferentes:<\/p>\n<ul>\n<li>La API REST de WordPress proporciona una forma de interactuar con los datos de WordPress a trav\u00e9s de HTTP. La utilizar\u00e1s para aplicaciones externas, <a href=\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/\">configuraciones headless de WordPress<\/a> y en cualquier lugar donde necesites <a href=\"https:\/\/kinsta.com\/es\/blog\/rest-api-de-wordpress\/\">recuperar y manipular datos<\/a>.<\/li>\n<li>El paquete de datos de WordPress proporciona un almac\u00e9n centralizado para los datos y el estado de la interfaz de usuario. Es una forma de manejar el flujo de datos y las actualizaciones dentro de tu aplicaci\u00f3n.<\/li>\n<\/ul>\n<p>En muchos casos, utilizar\u00e1s ambos a la vez: la API REST para obtener y actualizar datos en el servidor y el paquete de datos de WordPress para gestionar esos datos dentro de tu aplicaci\u00f3n.<\/p>\n<h2>Conceptos clave y terminolog\u00eda del paquete de datos de WordPress<\/h2>\n<p>El paquete de datos de WordPress ofrece una forma intuitiva de gestionar el estado. Se refiere a los datos dentro de un almac\u00e9n. Representa el estado actual de tu aplicaci\u00f3n y puede incluir tanto el estado de la interfaz de usuario (como si hay un modal abierto) como el estado de los datos (como una lista de entradas).<\/p>\n<figure id=\"attachment_188331\" aria-describedby=\"caption-attachment-188331\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-188331 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/post-list.png\" alt=\"La p\u00e1gina Entradas del panel de control de WordPress muestra una lista de 106 entradas con varias opciones de filtrado en la parte superior. Esta interfaz muestra columnas para t\u00edtulo, autor, categor\u00edas, etiquetas y fecha. La barra lateral izquierda contiene los t\u00edpicos elementos de navegaci\u00f3n del administrador de WordPress a otras pantallas. En la lista de entradas se incluye tanto el contenido publicado como el programado.\" width=\"1200\" height=\"721\"><figcaption id=\"caption-attachment-188331\" class=\"wp-caption-text\">El estado de los datos de tus entradas es un \u00e1rea que gestiona el paquete de datos de WordPress.<\/figcaption><\/figure>\n<p>En este contexto, un almac\u00e9n es el eje central del paquete de datos de WordPress. Contiene todo el estado del sitio y proporciona los m\u00e9todos para acceder y actualizar ese estado. En WordPress, puedes tener varios almacenes. Cada uno ser\u00e1 responsable de un \u00e1rea espec\u00edfica de tu sitio.<\/p>\n<p>Para gestionar esos almacenes, necesitas un registro. Este objeto central proporciona m\u00e9todos para registrar nuevos almacenes y acceder a los existentes. Un registro contendr\u00e1 almacenes, y esos almacenes contendr\u00e1n el estado de tu aplicaci\u00f3n.<\/p>\n<p>Hay varias formas de trabajar con el estado:<\/p>\n<ul>\n<li>Las acciones describen los cambios en un estado. Son objetos JavaScript planos y son la \u00fanica forma de activar actualizaciones de estado. Las acciones suelen tener una propiedad <code>type<\/code>, que describe la acci\u00f3n. Tambi\u00e9n puede incluir datos adicionales.<\/li>\n<li>Los selectores extraen partes espec\u00edficas del estado del almac\u00e9n. Estas funciones te permiten acceder a los datos de estado sin necesidad de interactuar directamente con la estructura del almac\u00e9n. Los resolvedores est\u00e1n relacionados y se encargan de la <a href=\"https:\/\/kinsta.com\/courses\/speed-up-wordpress\/lazy-loading-async-defer\/\">obtenci\u00f3n as\u00edncrona de datos<\/a>. Los utilizas para asegurarte de que puedes acceder a los datos necesarios de un almac\u00e9n antes de ejecutar un selector.<\/li>\n<li>Los reductores especifican c\u00f3mo debe cambiar el estado en respuesta a las acciones. Toman el estado actual y una acci\u00f3n como argumentos y devuelven un nuevo objeto de estado. Las funciones de control permiten a los reductores manejar operaciones as\u00edncronas complejas sin efectos secundarios.<\/li>\n<\/ul>\n<p>Es necesario que comprendas estos conceptos fundamentales, ya que todos ellos trabajan juntos para crear un s\u00f3lido sistema de gesti\u00f3n de estados con los almacenes como n\u00facleo.<\/p>\n<h2>Almacenes: el eje central del paquete de datos de WordPress<\/h2>\n<p>Los almacenes son los contenedores del estado de tu aplicaci\u00f3n y proporcionan los m\u00e9todos para interactuar con \u00e9l. El paquete de datos de WordPress agrupa otros paquetes, y cada uno de ellos registra almacenes para el directorio de bloques, el <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">Editor de Bloques<\/a>, el core, la edici\u00f3n de entradas, etc.<\/p>\n<p>Cada almac\u00e9n tendr\u00e1 un espacio de nombres \u00fanico, como <code>core<\/code>, <code>core\/editor<\/code>, y <code>core\/notices<\/code>. Los plugins de terceros tambi\u00e9n registrar\u00e1n almacenes, por lo que deber\u00e1s elegir espacios de nombres \u00fanicos para evitar conflictos. En cualquier caso, los almacenes que registres estar\u00e1n en el registro por defecto en la mayor\u00eda de los casos.<\/p>\n<p>Este objeto central tiene algunas responsabilidades:<\/p>\n<ul>\n<li>Registrar nuevos almacenes.<\/li>\n<li>Proporcionar acceso a los almacenes existentes.<\/li>\n<li>Gestionar las suscripciones a los cambios de estado.<\/li>\n<\/ul>\n<p>Aunque no sueles tener una interacci\u00f3n directa con el registro, necesitas comprender su papel en la forma en que el paquete de datos organiza la gesti\u00f3n de estados en WordPress.<\/p>\n<h3>Interacci\u00f3n b\u00e1sica con los almacenes de datos de WordPress<\/h3>\n<p>Si utilizas JavaScript <a href=\"https:\/\/www.javascripttutorial.net\/es6\/\" target=\"_blank\" rel=\"noopener noreferrer\">ES2015+<\/a> y est\u00e1s trabajando con un plugin o tema de WordPress, puedes incluirlo como dependencia:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/data --save<\/code><\/pre>\n<p>Dentro de tu c\u00f3digo, importar\u00e1s las funciones necesarias del paquete en la parte superior del archivo:<\/p>\n<pre><code class=\"language-bash\">import { select, dispatch, subscribe } from '@wordpress\/data';<\/code><\/pre>\n<p>Interactuar con almacenes existentes de WordPress requiere que utilices algunas de las funciones que importas. Acceder a los datos de estado con <code>select<\/code>, por ejemplo:<\/p>\n<pre><code class=\"language-js\">const posts = select('core').getPosts();<\/code><\/pre>\n<p>Lo mismo ocurre para enviar acciones:<\/p>\n<pre><code class=\"language-js\">dispatch('core').savePost(postData);<\/code><\/pre>\n<p>La suscripci\u00f3n a cambios de estado utiliza un formato ligeramente diferente, pero el concepto es el mismo:<\/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>Sin embargo, no siempre trabajar\u00e1s con los almacenes predeterminados. A menudo, trabajar\u00e1s con almacenes adicionales existentes o registrar\u00e1s los tuyos propios.<\/p>\n<h2>C\u00f3mo registrar un almac\u00e9n de datos de WordPress<\/h2>\n<p>Definir la configuraci\u00f3n de tu almac\u00e9n y registrarlo con el paquete de datos de WordPress comienza con la importaci\u00f3n de la funci\u00f3n <code>register<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nimport { createReduxStore, register } from '@wordpress\/data';\n\u2026<\/code><\/pre>\n<p>\u00c9sta toma un \u00fanico argumento \u2014 el descriptor de tu almac\u00e9n. A continuaci\u00f3n, debes definir un estado predeterminado para el almac\u00e9n para establecer sus valores por defecto:<\/p>\n<pre><code class=\"language-js\">\u2026\nconst DEFAULT_STATE = {\n  todos: [],\n};\n\u2026<\/code><\/pre>\n<p>A continuaci\u00f3n, crea un objeto <code>actions<\/code>, define una funci\u00f3n <code>reducer<\/code> para gestionar las actualizaciones de estado, y crea un objeto <code>selectors<\/code> con funciones para acceder a los datos 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 crear la configuraci\u00f3n de la tienda, def\u00ednela utilizando el objeto <code>createReduxStore<\/code>. Esto inicializar\u00e1 las acciones, selectores, control y otras propiedades de tu tienda:<\/p>\n<pre><code class=\"language-js\">const store = createReduxStore('my-plugin\/todos', {\n  reducer,\n  actions,\n  selectors,\n});<\/code><\/pre>\n<p>Lo m\u00ednimo que necesita este objeto es un reductor para definir la forma del estado y c\u00f3mo cambia en respuesta a otras acciones. Por \u00faltimo, registra la tienda, llamando al descriptor de tienda que definas con <code>createReduxStore<\/code>:<\/p>\n<pre><code class=\"language-js\">register(store);<\/code><\/pre>\n<p>Ahora puedes interactuar con tu tienda personalizada como lo har\u00edas con otras:<\/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>La clave en el uso del paquete de datos de WordPress es c\u00f3mo utilizas las distintas propiedades y objetos que tienes a tu disposici\u00f3n.<\/p>\n<h2>Desglosando las cinco propiedades del paquete de datos de WordPress<\/h2>\n<p>Gran parte del uso del paquete de datos de WordPress ocurre de manera \u00abinversa\u00bb \u2014 definiendo propiedades de almac\u00e9n de datos de bajo nivel antes que el propio almac\u00e9n. El objeto <code>createReduxStore<\/code> es un ejemplo perfecto, ya que <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#createreduxstore\">re\u00fane todas<\/a> las definiciones que haces para crear el descriptor que utilizas para registrar un almac\u00e9n:<\/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>Estas otras propiedades tambi\u00e9n necesitan configuraci\u00f3n.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Acciones<\/h3>\n<p>Las acciones son la forma principal de provocar cambios de estado en tu almac\u00e9n. Son simples objetos JavaScript que describen lo que <em>debe<\/em> ocurrir. Como tales, puede ser una buena idea crearlas primero, ya que puedes decidir qu\u00e9 estados quieres recuperar.<\/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>Los <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action-creator\">creadores de acciones<\/a> toman argumentos opcionales y devolver\u00e1n un objeto para pasarlo al reductor que definas:<\/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>Si pasas un descriptor de almac\u00e9n, puedes enviar creadores de acciones y actualizar el valor del estado:<\/p>\n<pre><code class=\"language-js\">dispatch('my-plugin\/todos').updateStockPrice('\u00a5', '150.37');<\/code><\/pre>\n<p>Considera los objetos de acci\u00f3n como instrucciones para el reductor sobre c\u00f3mo realizar cambios de estado. Como m\u00ednimo, es probable que quieras definir acciones de creaci\u00f3n, actualizaci\u00f3n, lectura y eliminaci\u00f3n (CRUD). Tambi\u00e9n podr\u00eda ser que tuvieras un archivo JavaScript separado para los tipos de acci\u00f3n y crearas un objeto para todos esos tipos, especialmente si los defines como constantes.<\/p>\n<h3>2. Reductores<\/h3>\n<p>Aqu\u00ed merece la pena hablar del reductor, por su papel central junto a las acciones. Su trabajo consiste en especificar c\u00f3mo debe cambiar el estado en respuesta a las instrucciones que recibe de una acci\u00f3n. Si le pasas las instrucciones de la acci\u00f3n y el estado actual, puede devolver un nuevo objeto de estado y pasarlo a lo largo de la cadena:<\/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>Ten en cuenta que un reductor debe ser una <a href=\"https:\/\/www.geeksforgeeks.org\/functional-programming-pure-and-impure-functions\/\" target=\"_blank\" rel=\"noopener noreferrer\">funci\u00f3n pura<\/a>, y no debe mutar el estado que acepta (m\u00e1s bien, debe devolverlo actualizado). Los reductores y las acciones tienen una relaci\u00f3n simbi\u00f3tica en muchos aspectos, por lo que es importante comprender c\u00f3mo funcionan juntos.<\/p>\n<h3>3. Selectores<\/h3>\n<p>Para acceder al estado actual desde un almac\u00e9n registrado, necesitas selectores. Es la forma principal de \u00abexponer\u00bb el estado de tu almac\u00e9n, y ayudan a mantener tus componentes desacoplados de la estructura interna del almac\u00e9n:<\/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>Puedes llamar a esos selectores con la funci\u00f3n <code>select<\/code>:<\/p>\n<pre><code class=\"language-js\">const todoCount = select('my-plugin\/todos').getTodoCount();<\/code><\/pre>\n<p>Sin embargo, un selector no env\u00eda esos datos a ninguna parte: simplemente los revela y proporciona acceso a ellos.<\/p>\n<p>Los selectores pueden recibir tantos argumentos como necesites para acceder al estado con precisi\u00f3n. El valor que devuelve es el resultado de lo que consigan esos argumentos dentro del selector que definas. Al igual que con las acciones, puedes optar por tener un archivo aparte para guardar todos tus selectores, ya que podr\u00edan ser muchos.<\/p>\n<h3>4. Controles<\/h3>\n<p>Para guiar el flujo de ejecuci\u00f3n de la funcionalidad de tu sitio \u2014 o ejecutar la l\u00f3gica dentro de \u00e9l \u2014 es donde <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b76a258213bde016726e16949d76fed12c5a34d\/packages\/redux-routine\/README.md\">utilizas los controles<\/a>. \u00c9stos definen el comportamiento de los flujos de ejecuci\u00f3n de tus acciones. Consid\u00e9ralos los asistentes del paquete de datos de WordPress, ya que funcionan como intermediarios para recoger el estado que hay que pasar a los resolvers.<\/p>\n<p>Los controles tambi\u00e9n gestionan los efectos secundarios de tu almac\u00e9n, como las llamadas a la API o las interacciones con las API del navegador. Te permiten mantener limpios los reductores y, al mismo tiempo, manejar operaciones as\u00edncronas complejas:<\/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 obtenci\u00f3n y devoluci\u00f3n de datos es crucial para todo el proceso. Pero sin una llamada desde una acci\u00f3n, no podr\u00e1s utilizar esos datos.<\/p>\n<h3>5. Resolvers<\/h3>\n<p>Los selectores exponen el estado de un almac\u00e9n, pero no env\u00edan expl\u00edcitamente esos datos a ninguna parte. Los resolvers se encuentran con los selectores (y los controles) para recuperar los datos. Al igual que los controles, tambi\u00e9n pueden gestionar la obtenci\u00f3n as\u00edncrona de datos.<\/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>El resolver se asegura de que los datos que pides est\u00e1n disponibles en el almac\u00e9n antes de ejecutar un selector. Esta estrecha conectividad entre el resolver y el selector significa que deben coincidir los nombres. Esto es para que el paquete de datos de WordPress pueda entender qu\u00e9 resolver debe invocar en funci\u00f3n de los datos que solicites.<\/p>\n<p>Adem\u00e1s, el resolver siempre recibir\u00e1 los mismos argumentos que pases a una funci\u00f3n selectora, y tambi\u00e9n devolver\u00e1, ceder\u00e1 o enviar\u00e1 objetos de acci\u00f3n.<\/p>\n<h2>Gesti\u00f3n de errores al utilizar el paquete de datos de WordPress<\/h2>\n<p>Debes implementar una <a href=\"https:\/\/kinsta.com\/es\/blog\/errores-en-javascript\/\">gesti\u00f3n adecuada de los errores<\/a> cuando trabajes con el paquete de datos de WordPress. Si decides tratar con operaciones as\u00edncronas, trabajar con <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-node-js\/\">despliegues full stack<\/a> o hacer llamadas a la API, es a\u00fan m\u00e1s vital.<\/p>\n<p>Por ejemplo, si env\u00edas acciones que implican operaciones as\u00edncronas, un bloque try-catch podr\u00eda ser una buena opci\u00f3n:<\/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>Para los reductores, puedes gestionar acciones de error y actualizar el 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>Cuando utilices selectores, puedes incluir la comprobaci\u00f3n de errores para gestionar posibles problemas y, a continuaci\u00f3n, comprobar si hay errores en tus componentes antes de utilizar los datos.:<\/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>Las funciones <code>useSelect<\/code> y <code>useDispatch<\/code> te dan mucho poder para manejar errores dentro del paquete de datos de WordPress. Con ambas puedes pasar mensajes de error personalizados como argumentos.<\/p>\n<p>Es una buena pr\u00e1ctica asegurarte de centralizar tu estado de error durante la configuraci\u00f3n inicial, y mantener los l\u00edmites de error a nivel de componente. Emplear la gesti\u00f3n de errores para los estados de carga tambi\u00e9n ayudar\u00e1 a mantener tu c\u00f3digo claro y coherente.<\/p>\n<h2>C\u00f3mo integrar el almac\u00e9n de datos de WordPress con tu sitio web<\/h2>\n<p>Hay muchas cosas que el paquete de datos de WordPress puede hacer para ayudarte a gestionar el estado. Aunar todo esto es tambi\u00e9n una consideraci\u00f3n pr\u00e1ctica. Analicemos un teletipo burs\u00e1til que muestra y actualiza datos financieros en tiempo real.<\/p>\n<p>La primera tarea es crear un almac\u00e9n para tus datos:<\/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>Este proceso configura un estado por defecto que incluye los estados de error y carga, junto con tus acciones, reductores y selectores. Una vez definidos \u00e9stos, puedes registrar el almac\u00e9n.<\/p>\n<h3>Visualizar los datos del almac\u00e9n<\/h3>\n<p>Una vez creado el almac\u00e9n, puedes <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">crear un componente React<\/a> para mostrar la informaci\u00f3n que contiene:<\/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 incorpora los hooks <code>useSelect<\/code> y <code>useDispatch<\/code> (junto con otros) para gestionar el acceso a los datos, el env\u00edo de acciones y la gesti\u00f3n del ciclo de vida del componente. Tambi\u00e9n establece mensajes personalizados de error y de estado de carga, adem\u00e1s de algo de c\u00f3digo para mostrar realmente el teletipo. Una vez hecho esto, ahora tienes que registrar el componente en WordPress.<\/p>\n<h3>Registrar el componente con WordPress<\/h3>\n<p>Si no lo registras en WordPress, no podr\u00e1s utilizar los componentes que crees. Esto significa registrarlo como un Bloque, aunque podr\u00eda ser un widget si dise\u00f1as para <a href=\"https:\/\/kinsta.com\/es\/blog\/crear-tema-clasico-de-wordpress\/\">Temas Cl\u00e1sicos<\/a>. Este ejemplo utiliza un Bloque.<\/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>Este proceso seguir\u00e1 el enfoque t\u00edpico que seguir\u00e1s para registrar Bloques dentro de WordPress, y no requiere ninguna implementaci\u00f3n o configuraci\u00f3n especial.<\/p>\n<h3>Gestionar las actualizaciones de estado y las interacciones de los usuarios<\/h3>\n<p>Una vez registrado el Bloque, tienes que gestionar las interacciones del usuario y las actualizaciones en tiempo real. Para ello necesitar\u00e1s algunos controles interactivos, junto con HTML y 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 las actualizaciones en tiempo real, puedes establecer un intervalo dentro 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>Este enfoque mantiene los datos de tu componente sincronizados con tu tienda, al tiempo que mantiene una clara separaci\u00f3n de preocupaciones. El paquete de datos de WordPress se encargar\u00e1 de todas las actualizaciones de estado, lo que proporciona coherencia a tu aplicaci\u00f3n.<\/p>\n<h3>Renderizado del lado del servidor<\/h3>\n<p>Por \u00faltimo, puedes configurar la renderizaci\u00f3n del lado del servidor para asegurarte de que los datos de la tienda est\u00e1n actualizados al cargar la p\u00e1gina. Esto requiere algunos <a href=\"https:\/\/kinsta.com\/es\/blog\/php-tutoriales\/\">conocimientos 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>Este enfoque proporciona una integraci\u00f3n completa de tu almac\u00e9n de datos con WordPress, encarg\u00e1ndose de todo, desde la renderizaci\u00f3n inicial hasta las actualizaciones en tiempo real y las interacciones del usuario.<\/p>\n<h2>Resumen<\/h2>\n<p>El paquete de datos de WordPress es una forma compleja pero robusta de gestionar los estados de la aplicaci\u00f3n para tus proyectos. M\u00e1s all\u00e1 de los conceptos clave hay un sinf\u00edn de funciones, operadores, argumentos y mucho m\u00e1s. Pero recuerda que no todos los datos deben estar en un almac\u00e9n global \u2014 el estado local de los componentes sigue teniendo cabida en tu c\u00f3digo.<\/p>\n<p>\u00bfTe ves utilizando el paquete de datos de WordPress de forma habitual, o tienes otro m\u00e9todo para gestionar el estado? Comparte tus opiniones con nosotros en los comentarios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gestionar el estado de cualquier aplicaci\u00f3n de WordPress \u2014 c\u00f3mo maneja y organiza los datos \u2014 puede ser todo un reto. A medida que tu proyecto &#8230;<\/p>\n","protected":false},"author":259,"featured_media":77634,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1345],"class_list":["post-77633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desarrollo-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>Paquete de datos WordPress para gestionar los estados de la aplicaci\u00f3n<\/title>\n<meta name=\"description\" content=\"La gesti\u00f3n de estados en aplicaciones complejas puede ser una lucha. Exploremos el uso del paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n.\" \/>\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\/es\/blog\/paquete-de-datos-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo utilizar el paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n\" \/>\n<meta property=\"og:description\" content=\"La gesti\u00f3n de estados en aplicaciones complejas puede ser una lucha. Exploremos el uso del paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-03T08:26:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-24T11:02:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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 gesti\u00f3n de estados en aplicaciones complejas puede ser una lucha. Exploremos el uso del paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"C\u00f3mo utilizar el paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n\",\"datePublished\":\"2025-01-03T08:26:10+00:00\",\"dateModified\":\"2026-02-24T11:02:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/\"},\"wordCount\":2886,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/\",\"name\":\"Paquete de datos WordPress para gestionar los estados de la aplicaci\u00f3n\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"datePublished\":\"2025-01-03T08:26:10+00:00\",\"dateModified\":\"2026-02-24T11:02:36+00:00\",\"description\":\"La gesti\u00f3n de estados en aplicaciones complejas puede ser una lucha. Exploremos el uso del paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo utilizar el paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Paquete de datos WordPress para gestionar los estados de la aplicaci\u00f3n","description":"La gesti\u00f3n de estados en aplicaciones complejas puede ser una lucha. Exploremos el uso del paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n.","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\/es\/blog\/paquete-de-datos-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo utilizar el paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n","og_description":"La gesti\u00f3n de estados en aplicaciones complejas puede ser una lucha. Exploremos el uso del paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n.","og_url":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2025-01-03T08:26:10+00:00","article_modified_time":"2026-02-24T11:02:36+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"La gesti\u00f3n de estados en aplicaciones complejas puede ser una lucha. Exploremos el uso del paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Steve Bonisteel","Tiempo de lectura":"19 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"C\u00f3mo utilizar el paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n","datePublished":"2025-01-03T08:26:10+00:00","dateModified":"2026-02-24T11:02:36+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/"},"wordCount":2886,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state.png","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/","name":"Paquete de datos WordPress para gestionar los estados de la aplicaci\u00f3n","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state.png","datePublished":"2025-01-03T08:26:10+00:00","dateModified":"2026-02-24T11:02:36+00:00","description":"La gesti\u00f3n de estados en aplicaciones complejas puede ser una lucha. Exploremos el uso del paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/wordpress-data-package-manage-application-state.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/paquete-de-datos-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo utilizar el paquete de datos de WordPress para gestionar los estados de la aplicaci\u00f3n"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/77633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=77633"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/77633\/revisions"}],"predecessor-version":[{"id":82223,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/77633\/revisions\/82223"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77633\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77633\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77633\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77633\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77633\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77633\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77633\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77633\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77633\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/77634"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=77633"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=77633"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=77633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}