{"id":6226,"date":"2026-01-26T12:54:15","date_gmt":"2026-01-26T12:54:15","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/combiner-state-local-redux\/"},"modified":"2026-01-26T12:54:20","modified_gmt":"2026-01-26T12:54:20","slug":"combiner-state-local-redux","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/combiner-state-local-redux\/","title":{"rendered":"18.8 Combiner le State Local avec Redux"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>State Local Redux<\/strong> est une m\u00e9thode efficace pour combiner les avantages de l&rsquo;\u00e9tat local avec ceux de Redux dans les applications React. En int\u00e9grant ces deux approches, vous pouvez optimiser tant la performance que la structure de vos applications. D\u00e9couvrez comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Combinaison du State Local avec Redux<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706150265?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  var iframe = document.getElementById('vimeoPlayer');\n  var player = new Vimeo.Player(iframe);\n  var isPopupDisplayed = false;\n\n  player.on('play', function() {\n      if (!isPopupDisplayed) {\n          player.on('timeupdate', function(data) {\n              if (data.seconds >= 120 && !isPopupDisplayed) {\n                  player.pause().then(function() {\n                      if (window.innerWidth > 768) {\n                          document.querySelector('.desktop-popup').style.display = 'block';\n                      } else {\n                          document.querySelector('.mobile-popup').style.display = 'block';\n                      }\n                      fetchPriceAndUpdatePopup();\n                      isPopupDisplayed = true;\n                  });\n              }\n          });\n      }\n  });\n\n  function fetchPriceAndUpdatePopup() {\n      fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n          .then(response => response.text())\n          .then(html => {\n              var parser = new DOMParser();\n              var fetchedDoc = parser.parseFromString(html, 'text\/html');\n              var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n              var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n              var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n              var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n              document.getElementById('price').textContent = price;\n              document.getElementById('priceMobile').textContent = price;\n              document.querySelector('.desktop-popup del').textContent = originalPrice;\n              document.querySelector('.mobile-popup del').textContent = originalPrice;\n          })\n          .catch(error => console.error('Error fetching the price:', error));\n  }\n\n  function closePopup() {\n      document.querySelector('.desktop-popup').style.display = 'none';\n      document.querySelector('.mobile-popup').style.display = 'none';\n      player.play();\n  }\n});\n<\/script>\n\n\n\n<p>Dans le d\u00e9veloppement React, <strong>Redux<\/strong> est utilis\u00e9 pour centraliser l&rsquo;\u00e9tat de l&rsquo;application, tandis que le <strong>State Local<\/strong> permet de g\u00e9rer des \u00e9tats sp\u00e9cifiques \u00e0 certains composants. Bien que ces deux m\u00e9thodes puissent sembler oppos\u00e9es, les combiner permet de b\u00e9n\u00e9ficier d&rsquo;une gestion de l&rsquo;\u00e9tat \u00e0 la fois globale et locale, selon les besoins de votre application. Vous pouvez en apprendre davantage sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">l&rsquo;introduction et avantages de React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quand Utiliser le State Local et Redux<\/h3>\n\n\n\n<p>Il est essentiel de d\u00e9terminer quels \u00e9tats doivent \u00eatre g\u00e9r\u00e9s localement et lesquels n\u00e9cessitent une gestion globale avec Redux. En g\u00e9n\u00e9ral, <strong>le State Local<\/strong> est id\u00e9al pour les \u00e9tats temporaires et sp\u00e9cifiques aux composants, comme les \u00e9tats de formulaire ou la gestion des modales. En revanche, <strong>le Redux<\/strong>, comme expliqu\u00e9 dans notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-fonctionnement-redux\" target=\"_blank\" rel=\"noopener\">le fonctionnement de Redux<\/a>, est plus adapt\u00e9 pour les donn\u00e9es partag\u00e9es entre plusieurs composants ou persistant au-del\u00e0 du cycle de vie d&rsquo;un composant. Voici quelques exemples concrets :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Exemple d'\u00e9tat local\nconst MyComponent = () => {\n  const [modalOpen, setModalOpen] = useState(false);\n\n  return (\n    <div>\n      <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal<\/button>\n      {modalOpen && <Modal \/>}\n    <\/div>\n  );\n};\n\n\/\/ Exemple d'\u00e9tat Redux\nconst mapStateToProps = (state) => {\n  return { userDetails: state.user.details };\n};\n\nconst MyConnectedComponent = connect(mapStateToProps)(MyComponent);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mise en \u0152uvre de la Combinaison State Local Redux<\/h3>\n\n\n\n<p>Voyons comment structurer une application React qui utilise conjointement le State Local et Redux. L&rsquo;objectif est de maintenir une interface utilisateur r\u00e9active en utilisant le State Local pour des interactions rapides et peu co\u00fbteuses en ressources, tout en utilisant Redux pour les donn\u00e9es qui n\u00e9cessitent une synchronisation ou une persistance \u00e0 travers l&rsquo;application. Pour plus de d\u00e9tails sur la cr\u00e9ation d&rsquo;une premi\u00e8re application, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">ce tutoriel sur la cr\u00e9ation d&rsquo;une premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\nimport { connect } from 'react-redux';\n\nconst MyComponent = ({ globalData }) => {\n  const [localCounter, setLocalCounter] = useState(0);\n\n  return (\n    <div>\n      <h1>Global Data: {globalData}<\/h1>\n      <h2>Local Counter: {localCounter}<\/h2>\n      <button onClick={() => setLocalCounter(localCounter + 1)}>Increment Local<\/button>\n    <\/div>\n  );\n};\n\nconst mapStateToProps = (state) => ({\n  globalData: state.app.globalData,\n});\n\nexport default connect(mapStateToProps)(MyComponent);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages de la Combinaison State Local Redux<\/h3>\n\n\n\n<p>Cette approche hybride offre plusieurs avantages. Vous pouvez maintenir des composants abstraits et performants gr\u00e2ce au State Local tout en profitant de la synchronisation globale et de la tra\u00e7abilit\u00e9 offertes par Redux. Cela conduit \u00e0 un code plus modulaire et maintenable, enrichissant ainsi l&rsquo;exp\u00e9rience utilisateur. Pour plus d&rsquo;informations sur la gestion du cycle de vie des applications React, lisez <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">cet article<\/a>.<\/p>\n\n\n\n<p>En conclusion, ma\u00eetriser l&rsquo;utilisation conjointe du State Local et de Redux est crucial pour b\u00e2tir des applications React robustes et \u00e9volutives. Exp\u00e9rimentez avec des exemples vari\u00e9s pour mieux comprendre o\u00f9 et comment appliquer chaque technique. Pour approfondir votre compr\u00e9hension, explorez des ressources suppl\u00e9mentaires ou suivez des cours en ligne pour enrichir votre apprentissage.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Formation React et Redux\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html State Local Redux est une m\u00e9thode efficace pour combiner les avantages de l&rsquo;\u00e9tat local avec ceux de Redux dans les applications React. En int\u00e9grant&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3176,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6226"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6226\/revisions"}],"predecessor-version":[{"id":6227,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6226\/revisions\/6227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3176"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}