{"id":78981,"date":"2025-01-03T09:26:59","date_gmt":"2025-01-03T08:26:59","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=78981&#038;preview=true&#038;preview_id=78981"},"modified":"2026-02-24T12:04:23","modified_gmt":"2026-02-24T11:04:23","slug":"paquet-donnees-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/","title":{"rendered":"Comment utiliser le paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats de l&rsquo;application ?"},"content":{"rendered":"<p>G\u00e9rer l&rsquo;\u00e9tat d&rsquo;<em>une<\/em> application WordPress &#8211; la fa\u00e7on dont elle traite et organise les donn\u00e9es &#8211; peut s&rsquo;av\u00e9rer difficile. Au fur et \u00e0 mesure que votre projet grandit, il devient de plus en plus difficile de suivre le flux de donn\u00e9es et d&rsquo;assurer des mises \u00e0 jour coh\u00e9rentes entre les composants. Le paquet de donn\u00e9es WordPress peut vous aider \u00e0 cet \u00e9gard, car il fournit une solution robuste pour la gestion de l&rsquo;\u00e9tat.<\/p>\n<p>Cet article se penche sur le paquet de donn\u00e9es WordPress, en explorant ses concepts cl\u00e9s, ses strat\u00e9gies de mise en \u0153uvre et ses meilleures pratiques.<\/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>Pr\u00e9sentation du paquet de donn\u00e9es WordPress<\/h2>\n<p>Le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/\" target=\"_blank\" rel=\"noopener noreferrer\">paquet de donn\u00e9es WordPress<\/a> &#8211; officiellement <code>@wordpress\/data<\/code> &#8211; est une biblioth\u00e8que de gestion d&rsquo;\u00e9tat JavaScript (ES2015 et sup\u00e9rieur) qui fournit un moyen pr\u00e9visible et centralis\u00e9 de g\u00e9rer l&rsquo;\u00e9tat des applications. Une bonne impl\u00e9mentation peut aider \u00e0 faciliter la construction d&rsquo;interfaces utilisateur complexes et \u00e0 g\u00e9rer le flux de donn\u00e9es \u00e0 travers ton application.<\/p>\n<p>Le paquet de donn\u00e9es WordPress s&rsquo;inspire de <a href=\"https:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Redux<\/a>, une biblioth\u00e8que de gestion d&rsquo;\u00e9tat populaire dans l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-composants-react-ui\/#20-react-redux\">\u00e9cosyst\u00e8me 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 page d'accueil de Redux, avec une section d'en-t\u00eate violette contenant le logo et le titre de Redux, ainsi qu'un slogan et un bouton \u00ab Get Started \u00bb. En dessous se trouvent quatre sections de fonctionnalit\u00e9s cl\u00e9s avec des ic\u00f4nes. Chaque section comprend un texte descriptif expliquant les capacit\u00e9s de Redux en mati\u00e8re de gestion de l'\u00e9tat des applications, d'outils de d\u00e9bogage et de compatibilit\u00e9 avec l'\u00e9cosyst\u00e8me. La barre de navigation sup\u00e9rieure contient des liens vers d'autres pages du site et une fonction de recherche.\" width=\"960\" height=\"594\"><figcaption id=\"caption-attachment-188531\" class=\"wp-caption-text\">Le site officiel de Redux.<\/figcaption><\/figure>\n<p>Ici, le module de donn\u00e9es fonctionne dans l&rsquo;environnement WordPress et propose des int\u00e9grations avec des fonctionnalit\u00e9s et des API sp\u00e9cifiques \u00e0 WordPress. Si vous construisez pour l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">\u00e9diteur de blocs de WordPress<\/a> &#8211; ou si c&rsquo;est quelque chose que vous devez prendre en charge &#8211; le module sera crucial pour g\u00e9rer son \u00e9tat. En utilisant les m\u00eames outils et mod\u00e8les dans vos propres extensions et th\u00e8mes, vous pouvez cr\u00e9er une exp\u00e9rience de d\u00e9veloppement plus coh\u00e9rente et famili\u00e8re.<\/p>\n<h3>La relation entre le package et Redux<\/h3>\n<p>Bien que le paquet de donn\u00e9es WordPress s&rsquo;inspire de Redux, il ne s&rsquo;agit pas d&rsquo;un portage direct. Il y a de nombreuses adaptations pour s&rsquo;adapter \u00e0 l&rsquo;\u00e9cosyst\u00e8me de WordPress, avec quelques diff\u00e9rences cl\u00e9s entre les deux solutions :<\/p>\n<ul>\n<li>Le paquet de donn\u00e9es est con\u00e7u pour fonctionner de mani\u00e8re transparente avec les API et les fonctionnalit\u00e9s de WordPress, ce que vanilla Redux ne peut pas faire sans cette adaptation.<\/li>\n<li>Par rapport \u00e0 Redux, le paquet de donn\u00e9es fournit une API plus rationalis\u00e9e. Cela peut faciliter la prise en main de l&rsquo;application.<\/li>\n<li>Contrairement \u00e0 Redux, le paquet de donn\u00e9es comprend une prise en charge int\u00e9gr\u00e9e des <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-node-js\/#5-async\">actions asynchrones<\/a>. Si vous travaillez avec l&rsquo;API REST de WordPress, cela vous sera utile.<\/li>\n<\/ul>\n<p>Le paquet de donn\u00e9es WordPress pr\u00e9sente \u00e9galement quelques comparaisons avec l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/rest-api-vs-web-api\/\">API REST<\/a>. Bien qu&rsquo;ils traitent tous deux de la gestion des donn\u00e9es, ils servent des objectifs diff\u00e9rents :<\/p>\n<ul>\n<li>L&rsquo;API REST de WordPress permet d&rsquo;interagir avec les donn\u00e9es de WordPress via HTTP. Vous l&rsquo;utiliserez pour des applications externes, des <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/\">configurations WordPress headless<\/a>, et partout o\u00f9 vous aurez besoin de <a href=\"https:\/\/kinsta.com\/fr\/blog\/api-rest-wordpress\/\">r\u00e9cup\u00e9rer et de manipuler des donn\u00e9es<\/a>.<\/li>\n<li>Le paquet de donn\u00e9es WordPress fournit un stockage centralis\u00e9 pour les donn\u00e9es et l&rsquo;\u00e9tat de l&rsquo;interface utilisateur. C&rsquo;est un moyen de g\u00e9rer le flux de donn\u00e9es et les mises \u00e0 jour dans votre application.<\/li>\n<\/ul>\n<p>Dans de nombreux cas, vous utiliserez les deux ensemble : l&rsquo;API REST pour r\u00e9cup\u00e9rer et mettre \u00e0 jour les donn\u00e9es sur le serveur et le paquet de donn\u00e9es WordPress pour g\u00e9rer ces donn\u00e9es au sein de votre application.<\/p>\n<h2>Concepts cl\u00e9s et terminologie du paquet de donn\u00e9es WordPress<\/h2>\n<p>Le paquet de donn\u00e9es WordPress offre un moyen intuitif de g\u00e9rer l&rsquo;\u00e9tat. Il s&rsquo;agit des donn\u00e9es contenues dans un magasin. Il repr\u00e9sente l&rsquo;\u00e9tat actuel de votre application et peut inclure \u00e0 la fois l&rsquo;\u00e9tat de l&rsquo;interface utilisateur (par exemple s&rsquo;il y a une fen\u00eatre modale ouverte) et l&rsquo;\u00e9tat des donn\u00e9es (par exemple une liste d&rsquo;articles).<\/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 page des articles du tableau de bord de WordPress affiche une liste de 106 articles avec diverses options de filtrage en haut de la page. Cette interface pr\u00e9sente des colonnes pour le titre, l'auteur, les cat\u00e9gories, les tags et la date. La barre lat\u00e9rale gauche contient des \u00e9l\u00e9ments de navigation typiques de l'administration de WordPress vers d'autres \u00e9crans. Le contenu publi\u00e9 et programm\u00e9 est inclus dans la liste des articles.\" width=\"1200\" height=\"721\"><figcaption id=\"caption-attachment-188331\" class=\"wp-caption-text\">L&rsquo;\u00e9tat des donn\u00e9es de tes articles est l&rsquo;un des domaines g\u00e9r\u00e9s par le paquet de donn\u00e9es de WordPress.<\/figcaption><\/figure>\n<p>Dans ce contexte, un magasin est le centre n\u00e9vralgique du paquet de donn\u00e9es WordPress. Il contient l&rsquo;ensemble de l&rsquo;\u00e9tat du site et fournit les m\u00e9thodes permettant d&rsquo;acc\u00e9der \u00e0 cet \u00e9tat et de le mettre \u00e0 jour. Dans WordPress, vous pouvez avoir plusieurs magasins. Chacun d&rsquo;entre eux sera responsable d&rsquo;une zone sp\u00e9cifique de votre site.<\/p>\n<p>Pour g\u00e9rer ces magasins, vous avez besoin d&rsquo;un registre. Cet objet central fournit des m\u00e9thodes pour enregistrer de nouveaux magasins et acc\u00e9der aux magasins existants. Un registre contiendra des magasins, et ces magasins contiendront l&rsquo;\u00e9tat de votre application.<\/p>\n<p>Il y a plusieurs fa\u00e7ons de travailler avec l&rsquo;\u00e9tat :<\/p>\n<ul>\n<li>Les actions d\u00e9crivent les changements apport\u00e9s \u00e0 un \u00e9tat. Ce sont de simples objets JavaScript et c&rsquo;est la seule fa\u00e7on de d\u00e9clencher des mises \u00e0 jour d&rsquo;\u00e9tat. Les actions ont g\u00e9n\u00e9ralement une propri\u00e9t\u00e9 <code>type<\/code>, qui d\u00e9crit l&rsquo;action. Elle peut \u00e9galement inclure des donn\u00e9es suppl\u00e9mentaires.<\/li>\n<li>Les s\u00e9lecteurs extraient des \u00e9l\u00e9ments sp\u00e9cifiques de l&rsquo;\u00e9tat du magasin. Ces fonctions vous permettent d&rsquo;acc\u00e9der aux donn\u00e9es d&rsquo;\u00e9tat sans qu&rsquo;il soit n\u00e9cessaire d&rsquo;interagir directement avec la structure du magasin. Les r\u00e9solveurs sont li\u00e9s et g\u00e8rent l&rsquo;<a href=\"https:\/\/kinsta.com\/courses\/speed-up-wordpress\/lazy-loading-async-defer\/\">extraction asynchrone des donn\u00e9es<\/a>. Vous les utilisez pour vous assurer que vous pouvez acc\u00e9der aux donn\u00e9es requises dans un magasin avant d&rsquo;ex\u00e9cuter un s\u00e9lecteur.<\/li>\n<li>Les r\u00e9ducteurs sp\u00e9cifient comment l&rsquo;\u00e9tat doit changer en r\u00e9ponse aux actions. Ils prennent l&rsquo;\u00e9tat actuel et une action comme arguments et renvoient un nouvel objet d&rsquo;\u00e9tat. Les fonctions de contr\u00f4le permettent aux r\u00e9ducteurs de g\u00e9rer des op\u00e9rations asynchrones complexes sans effets secondaires.<\/li>\n<\/ul>\n<p>Vous devez comprendre ces concepts fondamentaux, car ils fonctionnent tous ensemble pour cr\u00e9er un syst\u00e8me de gestion d&rsquo;\u00e9tat robuste avec les magasins en son c\u0153ur.<\/p>\n<h2>Les magasins : le centre du paquet de donn\u00e9es de WordPress<\/h2>\n<p>Les magasins sont les conteneurs de l&rsquo;\u00e9tat de votre application et fournissent les m\u00e9thodes pour interagir avec lui. Le paquet de donn\u00e9es WordPress regroupe quelques autres paquets, et chacun d&rsquo;entre eux enregistre des magasins pour le r\u00e9pertoire de blocs, l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur de blocs<\/a>, le noyau, l&rsquo;\u00e9dition d&rsquo;articles, et plus encore.<\/p>\n<p>Chaque magasin aura un espace de noms unique, comme <code>core<\/code>, <code>core\/editor<\/code>, et <code>core\/notices<\/code>. Les extensions tierces enregistreront \u00e9galement des magasins, vous devrez donc choisir des espaces de noms uniques pour \u00e9viter les conflits. Quoi qu&rsquo;il en soit, les boutiques que vous enregistrez se trouveront dans le registre par d\u00e9faut dans la plupart des cas.<\/p>\n<p>Cet objet central a quelques responsabilit\u00e9s :<\/p>\n<ul>\n<li>Enregistrer de nouveaux magasins.<\/li>\n<li>Fournir un acc\u00e8s aux magasins existants.<\/li>\n<li>G\u00e9rer les abonnements aux changements d&rsquo;\u00e9tat.<\/li>\n<\/ul>\n<p>Bien que vous n&rsquo;ayez pas souvent d&rsquo;interaction directe avec le registre, vous devez comprendre son r\u00f4le dans la fa\u00e7on dont le paquet de donn\u00e9es orchestre la gestion des \u00e9tats dans WordPress.<\/p>\n<h3>Interaction de base avec les magasins de donn\u00e9es de WordPress<\/h3>\n<p>Si vous utilisez <a href=\"https:\/\/www.javascripttutorial.net\/es6\/\" target=\"_blank\" rel=\"noopener noreferrer\">ES2015+<\/a> JavaScript et que vous travaillez avec une extension ou un th\u00e8me WordPress, vous pouvez l&rsquo;inclure en tant que d\u00e9pendance :<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/data --save<\/code><\/pre>\n<p>Dans votre code, vous importerez les fonctions n\u00e9cessaires du paquet en haut du fichier :<\/p>\n<pre><code class=\"language-bash\">import { select, dispatch, subscribe } from '@wordpress\/data';<\/code><\/pre>\n<p>L&rsquo;interaction avec les magasins WordPress existants n\u00e9cessite que vous utilisiez certaines des fonctions que vous importez. Acc\u00e9der aux donn\u00e9es d&rsquo;\u00e9tat avec <code>select<\/code>, par exemple :<\/p>\n<pre><code class=\"language-js\">const posts = select('core').getPosts();<\/code><\/pre>\n<p>Il en va de m\u00eame pour l&rsquo;envoi d&rsquo;actions :<\/p>\n<pre><code class=\"language-js\">dispatch('core').savePost(postData);<\/code><\/pre>\n<p>L&rsquo;abonnement aux changements d&rsquo;\u00e9tat utilise un format l\u00e9g\u00e8rement diff\u00e9rent, mais le concept est le m\u00eame :<\/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>Cependant, vous ne travaillerez pas toujours avec les magasins par d\u00e9faut. Souvent, vous travaillerez avec des magasins suppl\u00e9mentaires existants ou vous enregistrerez vos propres magasins.<\/p>\n<h2>Comment enregistrer un magasin de donn\u00e9es WordPress<\/h2>\n<p>D\u00e9finir la configuration de votre magasin et l&rsquo;enregistrer avec le paquet de donn\u00e9es WordPress commence par l&rsquo;importation de la fonction <code>register<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nimport { createReduxStore, register } from '@wordpress\/data';\n\u2026<\/code><\/pre>\n<p>Celle-ci prend un seul argument &#8211; le descripteur de votre magasin. Ensuite, vous devez d\u00e9finir un \u00e9tat par d\u00e9faut pour le magasin afin de d\u00e9finir ses valeurs par d\u00e9faut :<\/p>\n<pre><code class=\"language-js\">\u2026\nconst DEFAULT_STATE = {\n  todos: [],\n};\n\u2026<\/code><\/pre>\n<p>Ensuite, cr\u00e9ez un objet <code>actions<\/code>, d\u00e9finissez une fonction <code>reducer<\/code> pour g\u00e9rer les mises \u00e0 jour de l&rsquo;\u00e9tat, et cr\u00e9e un objet <code>selectors<\/code> avec des fonctions pour acc\u00e9der aux donn\u00e9es de l&rsquo;\u00e9tat :<\/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>Pour cr\u00e9er la configuration du magasin, d\u00e9finissez-la \u00e0 l&rsquo;aide de l&rsquo;objet <code>createReduxStore<\/code>. Celui-ci initialisera les actions, les s\u00e9lecteurs, le contr\u00f4le et les autres propri\u00e9t\u00e9s de votre magasin :<\/p>\n<pre><code class=\"language-js\">const store = createReduxStore('my-plugin\/todos', {\n  reducer,\n  actions,\n  selectors,\n});<\/code><\/pre>\n<p>Le minimum dont cet objet a besoin est un r\u00e9ducteur pour d\u00e9finir la forme de l&rsquo;\u00e9tat et la fa\u00e7on dont il change en r\u00e9ponse \u00e0 d&rsquo;autres actions. Enfin, enregistrez le magasin en appelant le descripteur de magasin que vous avez d\u00e9fini avec <code>createReduxStore<\/code>:<\/p>\n<pre><code class=\"language-js\">register(store);<\/code><\/pre>\n<p>Vous pouvez maintenant interagir avec votre magasin personnalis\u00e9 comme vous le feriez avec les autres :<\/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 cl\u00e9 de l&rsquo;utilisation du paquet de donn\u00e9es WordPress r\u00e9side dans la fa\u00e7on dont vous utilisez les diff\u00e9rentes propri\u00e9t\u00e9s et objets \u00e0 votre disposition.<\/p>\n<h2>D\u00e9composer les cinq propri\u00e9t\u00e9s du magasin de donn\u00e9es WordPress<\/h2>\n<p>Une grande partie de l&rsquo;utilisation du paquet de donn\u00e9es WordPress se fait \u00ab \u00e0 l&rsquo;envers \u00bb &#8211; en d\u00e9finissant les propri\u00e9t\u00e9s de bas niveau du magasin de donn\u00e9es avant le magasin lui-m\u00eame. L&rsquo;objet <code>createReduxStore<\/code> en est un parfait exemple, car il <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#createreduxstore\" target=\"_blank\" rel=\"noopener noreferrer\">rassemble<\/a> toutes les d\u00e9finitions que vous avez faites pour cr\u00e9er le descripteur que vous utilisez pour enregistrer un magasin :<\/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>Ces autres propri\u00e9t\u00e9s doivent \u00e9galement \u00eatre mises en place et configur\u00e9es.<\/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>Les actions sont le principal moyen de d\u00e9clencher des changements d&rsquo;\u00e9tat dans votre magasin. Il s&rsquo;agit d&rsquo;objets JavaScript simples qui d\u00e9crivent ce qui <em>doit<\/em> se passer. En tant que tel, il peut \u00eatre judicieux de les cr\u00e9er en premier, car vous pouvez d\u00e9cider des \u00e9tats que vous voulez r\u00e9cup\u00e9rer.<\/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>Les <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action-creator\">cr\u00e9ateurs d&rsquo;actions<\/a> prennent des arguments facultatifs et renvoient un objet \u00e0 transmettre au r\u00e9ducteur que vous avez d\u00e9fini :<\/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 vous transmetez un descripteur de magasin, vous pouvez envoyer des cr\u00e9ateurs d&rsquo;action et mettre \u00e0 jour la valeur de l&rsquo;\u00e9tat :<\/p>\n<pre><code class=\"language-js\">dispatch('my-plugin\/todos').updateStockPrice('\u00a5', '150.37');<\/code><\/pre>\n<p>Consid\u00e9rez les objets d&rsquo;action comme des instructions pour le r\u00e9ducteur sur la fa\u00e7on d&rsquo;effectuer les changements d&rsquo;\u00e9tat. Au minimum, vous voudrez probablement d\u00e9finir des actions de cr\u00e9ation, de mise \u00e0 jour, de lecture et de suppression (CRUD). Il se pourrait aussi que vous ayez un fichier JavaScript distinct pour les types d&rsquo;action et que vous cr\u00e9ez un objet pour tous ces types, surtout si vous les d\u00e9finissez comme des constantes.<\/p>\n<h3>2. R\u00e9ducteur<\/h3>\n<p>Il vaut la peine de parler du r\u00e9ducteur ici, en raison de son r\u00f4le central aux c\u00f4t\u00e9s des actions. Son travail consiste \u00e0 sp\u00e9cifier comment l&rsquo;\u00e9tat doit changer en r\u00e9ponse aux instructions qu&rsquo;il re\u00e7oit d&rsquo;une action. Si vous lui transmettez les instructions de l&rsquo;action et l&rsquo;\u00e9tat actuel, il peut renvoyer un nouvel objet d&rsquo;\u00e9tat et le transmettre le long de la cha\u00eene :<\/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>Notez qu&rsquo;un r\u00e9ducteur doit \u00eatre une <a href=\"https:\/\/www.geeksforgeeks.org\/functional-programming-pure-and-impure-functions\/\" target=\"_blank\" rel=\"noopener noreferrer\">fonction pure<\/a>, et qu&rsquo;il ne doit pas muter l&rsquo;\u00e9tat qu&rsquo;il accepte (il doit plut\u00f4t le renvoyer avec des mises \u00e0 jour). Les r\u00e9ducteurs et les actions ont une relation symbiotique \u00e0 bien des \u00e9gards, c&rsquo;est pourquoi il est important de comprendre comment ils fonctionnent ensemble.<\/p>\n<h3>3. Les s\u00e9lecteurs<\/h3>\n<p>Pour acc\u00e9der \u00e0 l&rsquo;\u00e9tat actuel d&rsquo;un magasin enregistr\u00e9, vous avez besoin de s\u00e9lecteurs. C&rsquo;est la principale fa\u00e7on d&rsquo;\u00ab exposer \u00bb l&rsquo;\u00e9tat de votre magasin, et ils aident \u00e0 garder vos composants d\u00e9coupl\u00e9s de la structure interne du magasin :<\/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>Vous pouvez appeler ces s\u00e9lecteurs avec la fonction <code>select<\/code>:<\/p>\n<pre><code class=\"language-js\">const todoCount = select('my-plugin\/todos').getTodoCount();<\/code><\/pre>\n<p>Cependant, un s\u00e9lecteur n&rsquo;envoie pas ces donn\u00e9es n&rsquo;importe o\u00f9 : il les r\u00e9v\u00e8le simplement et y donne acc\u00e8s.<\/p>\n<p>Les s\u00e9lecteurs peuvent recevoir autant d&rsquo;arguments que n\u00e9cessaire pour acc\u00e9der \u00e0 l&rsquo;\u00e9tat avec pr\u00e9cision. La valeur qu&rsquo;il renvoie est le r\u00e9sultat de ce que ces arguments r\u00e9alisent dans le s\u00e9lecteur que vous d\u00e9finissez. Comme pour les actions, vous pouvez choisir d&rsquo;avoir un fichier s\u00e9par\u00e9 pour contenir tous vos s\u00e9lecteurs, car il peut y en avoir beaucoup.<\/p>\n<h3>4. Contr\u00f4les<\/h3>\n<p>C&rsquo;est pour guider le flux d&rsquo;ex\u00e9cution des fonctionnalit\u00e9s de votre site &#8211; ou pour ex\u00e9cuter la logique \u00e0 l&rsquo;int\u00e9rieur de celui-ci &#8211; que vous <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b76a258213bde016726e16949d76fed12c5a34d\/packages\/redux-routine\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">utilisez des contr\u00f4les<\/a>. Ceux-ci d\u00e9finissent le comportement des flux d&rsquo;ex\u00e9cution pour tes actions. Consid\u00e9rez-les comme les assistants de l&rsquo;ensemble des donn\u00e9es de WordPress, car ils servent d&rsquo;interm\u00e9diaires pour rassembler l&rsquo;\u00e9tat \u00e0 transmettre aux r\u00e9solveurs.<\/p>\n<p>Les contr\u00f4les g\u00e8rent \u00e9galement les effets secondaires dans votre magasin, tels que les appels d&rsquo;API ou les interactions avec les API des navigateurs. Ils vous permettent de garder les r\u00e9ducteurs propres tout en vous permettant de g\u00e9rer des op\u00e9rations asynchrones complexes :<\/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>Ce cycle de r\u00e9cup\u00e9ration et de retour des donn\u00e9es est crucial pour l&rsquo;ensemble du processus. Mais sans appel d&rsquo;une action, vous ne pourrez pas utiliser ces donn\u00e9es.<\/p>\n<h3>5. R\u00e9solveurs<\/h3>\n<p>Les s\u00e9lecteurs exposent l&rsquo;\u00e9tat d&rsquo;un magasin, mais n&rsquo;envoient pas explicitement ces donn\u00e9es quelque part. Les r\u00e9solveurs rencontrent les s\u00e9lecteurs (et les contr\u00f4les) pour r\u00e9cup\u00e9rer les donn\u00e9es. Comme les contr\u00f4les, ils peuvent \u00e9galement g\u00e9rer la r\u00e9cup\u00e9ration asynchrone des donn\u00e9es.<\/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>Le r\u00e9solveur s&rsquo;assure que les donn\u00e9es que vous demandez sont disponibles dans le magasin avant d&rsquo;ex\u00e9cuter un s\u00e9lecteur. Cette connectivit\u00e9 \u00e9troite entre le r\u00e9solveur et le s\u00e9lecteur signifie qu&rsquo;ils doivent correspondre aux noms. C&rsquo;est ainsi que le paquet de donn\u00e9es de WordPress peut comprendre quel r\u00e9solveur doit \u00eatre invoqu\u00e9 en fonction des donn\u00e9es que vous demandez.<\/p>\n<p>De plus, le r\u00e9solveur recevra toujours les m\u00eames arguments que ceux que vous passez dans une fonction du s\u00e9lecteur, et il renverra, c\u00e9dera ou distribuera des objets d&rsquo;action.<\/p>\n<h2>Gestion des erreurs lors de l&rsquo;utilisation du paquet de donn\u00e9es WordPress<\/h2>\n<p>Vous devez mettre en place une <a href=\"https:\/\/kinsta.com\/fr\/blog\/erreurs-dans-javascript\/\">gestion des erreurs<\/a> appropri\u00e9e lorsque vous travaillez avec le paquet de donn\u00e9es de WordPress. Si vous choisissez de traiter des op\u00e9rations asynchrones, de travailler avec des <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-node-js\/\">d\u00e9ploiements de pile compl\u00e8te<\/a> ou de faire des appels d&rsquo;API, c&rsquo;est encore plus vital.<\/p>\n<p>Par exemple, si vous envoyez des actions qui impliquent des op\u00e9rations asynchrones, un bloc try-catch peut \u00eatre une bonne option :<\/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>Pour les r\u00e9ducteurs, vous pouvez g\u00e9rer les actions d&rsquo;erreur et mettre \u00e0 jour l&rsquo;\u00e9tat :<\/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>Lorsque vous utilisez des s\u00e9lecteurs, vous pouvez inclure une v\u00e9rification des erreurs pour g\u00e9rer les probl\u00e8mes potentiels puis v\u00e9rifier les erreurs dans tes composants avant d&rsquo;utiliser les donn\u00e9es :<\/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>Les fonctions <code>useSelect<\/code> et <code>useDispatch<\/code> vous donnent beaucoup de pouvoir pour g\u00e9rer les erreurs dans le paquet de donn\u00e9es de WordPress. Avec ces deux fonctions, vous pouvez passer des messages d&rsquo;erreur personnalis\u00e9s en tant qu&rsquo;arguments.<\/p>\n<p>C&rsquo;est une bonne pratique de s&rsquo;assurer que vous centralisez votre \u00e9tat d&rsquo;erreur lors de la configuration initiale, et de garder les limites d&rsquo;erreur au niveau des composants. L&rsquo;utilisation de la gestion des erreurs pour les \u00e9tats de chargement vous aidera \u00e9galement \u00e0 garder votre code clair et coh\u00e9rent.<\/p>\n<h2>Comment int\u00e9grer votre magasin de donn\u00e9es WordPress \u00e0 ton site ?<\/h2>\n<p>L&rsquo;ensemble des donn\u00e9es de WordPress peut faire beaucoup pour vous aider \u00e0 g\u00e9rer les \u00e9tats. Mettre tout cela ensemble est aussi une consid\u00e9ration pratique. Prenons l&rsquo;exemple d&rsquo;un t\u00e9l\u00e9scripteur d&rsquo;actions qui affiche et met \u00e0 jour des donn\u00e9es financi\u00e8res en temps r\u00e9el.<\/p>\n<p>La premi\u00e8re t\u00e2che consiste \u00e0 cr\u00e9er un magasin pour vos donn\u00e9es :<\/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>Ce processus met en place un \u00e9tat par d\u00e9faut qui comprend les \u00e9tats d&rsquo;erreur et de chargement, ainsi que tes actions, r\u00e9ducteurs et s\u00e9lecteurs. Une fois ces \u00e9l\u00e9ments d\u00e9finis, vous pouvez enregistrer le magasin.<\/p>\n<h3>Afficher les donn\u00e9es du magasin<\/h3>\n<p>Avec un magasin en place, vous pouvez <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">cr\u00e9er un composant React<\/a> pour afficher les informations qu&rsquo;il contient :<\/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>Ce composant apporte les crochets <code>useSelect<\/code> et <code>useDispatch<\/code> (ainsi que d&rsquo;autres) pour g\u00e9rer l&rsquo;acc\u00e8s aux donn\u00e9es, l&rsquo;envoi des actions et la gestion du cycle de vie des composants. Il d\u00e9finit \u00e9galement des messages d&rsquo;erreur et d&rsquo;\u00e9tat de chargement personnalis\u00e9s, ainsi qu&rsquo;un peu de code pour afficher r\u00e9ellement le t\u00e9l\u00e9scripteur. Une fois ces \u00e9l\u00e9ments en place, vous devez maintenant enregistrer le composant aupr\u00e8s de WordPress.<\/p>\n<h3>Enregistrer le composant avec WordPress<\/h3>\n<p>Sans enregistrement dans WordPress, vous ne pourrez pas utiliser les composants que vous avez cr\u00e9\u00e9s. Cela signifie que vous devez l&rsquo;enregistrer en tant que bloc, bien qu&rsquo;il puisse s&rsquo;agir d&rsquo;un widget si vous concevez des <a href=\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/\">th\u00e8mes classiques<\/a>. Cet exemple utilise un bloc.<\/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>Ce processus suivra l&rsquo;approche typique que vous adopterez pour enregistrer des blocs dans WordPress, et ne n\u00e9cessitera pas de mise en \u0153uvre ou de configuration particuli\u00e8re.<\/p>\n<h3>G\u00e9rer les mises \u00e0 jour de l&rsquo;\u00e9tat et les interactions de l&rsquo;utilisateur<\/h3>\n<p>Une fois que vous avez enregistr\u00e9 le bloc, vous devez g\u00e9rer les interactions avec l&rsquo;utilisateur et les mises \u00e0 jour en temps r\u00e9el. Cela n\u00e9cessitera quelques contr\u00f4les interactifs, ainsi que du HTML et du JavaScript personnalis\u00e9s :<\/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>Pour les mises \u00e0 jour en temps r\u00e9el, vous pouvez configurer un intervalle dans le composant 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>Cette approche permet de garder les donn\u00e9es de votre composant synchronis\u00e9es avec ton magasin tout en maintenant une s\u00e9paration claire des pr\u00e9occupations. Le paquet de donn\u00e9es WordPress s&rsquo;occupera de toutes les mises \u00e0 jour d&rsquo;\u00e9tat, ce qui donne de la coh\u00e9rence \u00e0 votre appli.<\/p>\n<h3>Rendu c\u00f4t\u00e9 serveur<\/h3>\n<p>Enfin, vous pouvez configurer le rendu c\u00f4t\u00e9 serveur pour vous assurer que les donn\u00e9es du stock sont \u00e0 jour lors du chargement de la page. Cela n\u00e9cessite quelques <a href=\"https:\/\/kinsta.com\/fr\/blog\/tutoriels-php\/\">connaissances en 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>Cette approche permet une int\u00e9gration compl\u00e8te de votre magasin de donn\u00e9es avec WordPress, en g\u00e9rant tout, du rendu initial aux mises \u00e0 jour en temps r\u00e9el et aux interactions avec l&rsquo;utilisateur.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Le paquet de donn\u00e9es WordPress est un moyen complexe mais robuste de g\u00e9rer les \u00e9tats de l&rsquo;application pour vos projets. Au-del\u00e0 des concepts cl\u00e9s se trouve un trou de lapin de fonctions, d&rsquo;op\u00e9rateurs, d&rsquo;arguments, et plus encore. N&rsquo;oubliez pas, cependant, que toutes les donn\u00e9es n&rsquo;ont pas besoin d&rsquo;\u00eatre dans un magasin global &#8211; l&rsquo;\u00e9tat des composants locaux a toujours sa place dans votre code.<\/p>\n<p>Utilisez-vous r\u00e9guli\u00e8rement le paquet de donn\u00e9es de WordPress ou avez-vous une autre m\u00e9thode de gestion de l&rsquo;\u00e9tat ? Partagez votre opinion avec nous dans les commentaires ci-dessous.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>G\u00e9rer l&rsquo;\u00e9tat d&rsquo;une application WordPress &#8211; la fa\u00e7on dont elle traite et organise les donn\u00e9es &#8211; peut s&rsquo;av\u00e9rer difficile. Au fur et \u00e0 mesure que votre &#8230;<\/p>\n","protected":false},"author":259,"featured_media":78982,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1028],"class_list":["post-78981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-developpement-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>Paquet de donn\u00e9es WordPress pour la gestion des \u00e9tats de l&#039;application<\/title>\n<meta name=\"description\" content=\"La gestion des \u00e9tats au sein d&#039;applications complexes peut s&#039;av\u00e9rer difficile. Nous allons explorer l&#039;utilisation du paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats d&#039;une application.\" \/>\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\/fr\/blog\/paquet-donnees-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment utiliser le paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats de l&#039;application ?\" \/>\n<meta property=\"og:description\" content=\"La gestion des \u00e9tats au sein d&#039;applications complexes peut s&#039;av\u00e9rer difficile. Nous allons explorer l&#039;utilisation du paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats d&#039;une application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-03T08:26:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-24T11:04:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/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 gestion des \u00e9tats au sein d&#039;applications complexes peut s&#039;av\u00e9rer difficile. Nous allons explorer l&#039;utilisation du paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats d&#039;une application.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Comment utiliser le paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats de l&rsquo;application ?\",\"datePublished\":\"2025-01-03T08:26:59+00:00\",\"dateModified\":\"2026-02-24T11:04:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/\"},\"wordCount\":3325,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/\",\"name\":\"Paquet de donn\u00e9es WordPress pour la gestion des \u00e9tats de l'application\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"datePublished\":\"2025-01-03T08:26:59+00:00\",\"dateModified\":\"2026-02-24T11:04:23+00:00\",\"description\":\"La gestion des \u00e9tats au sein d'applications complexes peut s'av\u00e9rer difficile. Nous allons explorer l'utilisation du paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats d'une application.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment utiliser le paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats de l&#8217;application ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"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\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Paquet de donn\u00e9es WordPress pour la gestion des \u00e9tats de l'application","description":"La gestion des \u00e9tats au sein d'applications complexes peut s'av\u00e9rer difficile. Nous allons explorer l'utilisation du paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats d'une application.","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\/fr\/blog\/paquet-donnees-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment utiliser le paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats de l'application ?","og_description":"La gestion des \u00e9tats au sein d'applications complexes peut s'av\u00e9rer difficile. Nous allons explorer l'utilisation du paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats d'une application.","og_url":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2025-01-03T08:26:59+00:00","article_modified_time":"2026-02-24T11:04:23+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"La gestion des \u00e9tats au sein d'applications complexes peut s'av\u00e9rer difficile. Nous allons explorer l'utilisation du paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats d'une application.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state-1024x512.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Steve Bonisteel","Dur\u00e9e de lecture estim\u00e9e":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Comment utiliser le paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats de l&rsquo;application ?","datePublished":"2025-01-03T08:26:59+00:00","dateModified":"2026-02-24T11:04:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/"},"wordCount":3325,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/","name":"Paquet de donn\u00e9es WordPress pour la gestion des \u00e9tats de l'application","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state.png","datePublished":"2025-01-03T08:26:59+00:00","dateModified":"2026-02-24T11:04:23+00:00","description":"La gestion des \u00e9tats au sein d'applications complexes peut s'av\u00e9rer difficile. Nous allons explorer l'utilisation du paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats d'une application.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/01\/wordpress-data-package-manage-application-state.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/paquet-donnees-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Comment utiliser le paquet de donn\u00e9es WordPress pour g\u00e9rer les \u00e9tats de l&#8217;application ?"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","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\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=78981"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78981\/revisions"}],"predecessor-version":[{"id":82574,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78981\/revisions\/82574"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78981\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78981\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78981\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78981\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78981\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78981\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78981\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78981\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78981\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/78982"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=78981"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=78981"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=78981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}