{"id":6220,"date":"2026-01-05T12:54:07","date_gmt":"2026-01-05T12:54:07","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/connecter-actions-redux-react\/"},"modified":"2026-01-05T12:54:13","modified_gmt":"2026-01-05T12:54:13","slug":"connecter-actions-redux-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/connecter-actions-redux-react\/","title":{"rendered":"18.5 Connecter les Actions Redux avec React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Connecter Actions Redux React<\/strong> est une \u00e9tape essentielle pour optimiser la gestion de l&rsquo;\u00e9tat dans vos applications React. Apprendre \u00e0 int\u00e9grer les actions Redux au sein de React permet d&rsquo;organiser et de structurer les flux de donn\u00e9es de mani\u00e8re efficace. Dans ce tutoriel, nous allons explorer comment connecter Redux et React \u00e0 travers des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Connexion des Actions Redux avec React<\/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\/706149291?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) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\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(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La connexion des actions Redux avec React am\u00e9liore la capacit\u00e9 de votre application \u00e0 g\u00e9rer son \u00e9tat en maintenant un store centralis\u00e9. Cela permet notamment de d\u00e9clencher des mises \u00e0 jour d&rsquo;interface bas\u00e9es sur des changements d&rsquo;\u00e9tat global. Voyons comment cela fonctionne en d\u00e9tail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Connecter vos Actions Redux<\/h3>\n\n\n\n<p>Les actions Redux sont simplement des objets d\u00e9crivant un changement d&rsquo;\u00e9tat souhait\u00e9. Pour connecter ces actions \u00e0 React, vous devez cr\u00e9er des &lsquo;action creators&rsquo; et utiliser le hook <code>useDispatch<\/code> de Redux. Voici un exemple.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ actions.js\nexport const increment = () => ({\n  type: 'INCREMENT',\n});\n\n\/\/ MyComponent.js\nimport React from 'react';\nimport { useDispatch } from 'react-redux';\nimport { increment } from '.\/actions';\n\nconst MyComponent = () => {\n  const dispatch = useDispatch();\n\n  return (\n    <button onClick={() => dispatch(increment())}>\n      Increment\n    <\/button>\n  );\n};\n\nexport default MyComponent;\n\n<\/code><\/pre>\n\n\n<p>Dans notre guide complet, <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\" target=\"_blank\" rel=\"noopener\">Comprendre le fonctionnement de Redux<\/a>, vous trouverez plus d&rsquo;informations sur la mise en \u0153uvre correcte des actions et des cr\u00e9ateurs d&rsquo;actions, cruciales pour la planification de l&rsquo;architecture de votre application.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Utiliser useSelector pour Lire l&rsquo;\u00e9tat Redux<\/h3>\n\n\n\n<p>Pour lire l&rsquo;\u00e9tat du store Redux dans vos composants React, vous devez utiliser le hook <code>useSelector<\/code>. Cela vous permet d&rsquo;acc\u00e9der au store et d&rsquo;extraire les parties de l&rsquo;\u00e9tat dont vous avez besoin pour votre composant.<\/p>\n\n\n<p> Retrouvez cet aspect dans un autre guide : <a href=\"https:\/\/wikiform.fr\/codespace\/connecter-store-redux-react\" target=\"_blank\" rel=\"noopener\">Connecter le store Redux \u00e0 React pour un \u00e9tat centralis\u00e9<\/a>.<\/p>\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport { useSelector } from 'react-redux';\n\nconst CounterDisplay = () => {\n  const count = useSelector((state) => state.counter);\n\n  return (\n    <div>\n      Count: {count}\n    <\/div>\n  );\n};\n\nexport default CounterDisplay;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer Redux dans une Application React<\/h3>\n\n\n\n<p>Avant de pouvoir utiliser Redux dans votre application, vous devez configurer un store. Utilisez le <code>Provider<\/code> de <code>react-redux<\/code> pour rendre le store accessible \u00e0 tous les composants de votre application. L&rsquo;accomplissement de cette \u00e9tape est bien d\u00e9taill\u00e9 dans notre article, <a href=\"https:\/\/wikiform.fr\/codespace\/configurer-react-redux-application\" target=\"_blank\" rel=\"noopener\">Configurer Redux et React efficacement<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport { createStore } from 'redux';\nimport rootReducer from '.\/reducers';\nimport App from '.\/App';\n\nconst store = createStore(rootReducer);\n\nReactDOM.render(\n  <Provider store={store}>\n    <App \/>\n  <\/Provider>,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n<p>D\u00e9couvrez plus d&rsquo;informations sur l&rsquo;utilisation des middleware dans <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-fonctionnement-redux\" target=\"_blank\" rel=\"noopener\">Comprendre le fonctionnement de Redux<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\">D\u00e9bugger avec Redux DevTools<\/h3>\n\n\n\n<p>Redux DevTools est une extension de navigateur qui vous aide \u00e0 d\u00e9bugger votre store Redux en visualisant les actions et l&rsquo;\u00e9tat courant. Pour en savoir plus, veuillez lire notre article, <a href=\"https:\/\/wikiform.fr\/codespace\/outils-de-deboggage-react-redux\" target=\"_blank\" rel=\"noopener\">Outils de d\u00e9bogage pour React et Redux<\/a>. Pour l&rsquo;utiliser, configurez votre store avec l&rsquo;extension. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import { createStore } from 'redux';\nimport { composeWithDevTools } from 'redux-devtools-extension';\nimport rootReducer from '.\/reducers';\n\nconst store = createStore(rootReducer, composeWithDevTools());\n\nexport default store;\n<\/code><\/pre>\n\n\n<p>Explorez ces nuances dans notre section li\u00e9e : <a href=\"https:\/\/wikiform.fr\/codespace\/analyse-differents-etats-cycle-vie-react\" target=\"_blank\" rel=\"noopener\">Analyse des diff\u00e9rents \u00e9tats du cycle de vie React<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Connecter les <strong>actions Redux avec React<\/strong> est essentiel pour construire des applications React efficaces et maintenables. Gr\u00e2ce \u00e0 l&rsquo;utilisation des hooks <code>useDispatch<\/code> et <code>useSelector<\/code>, vous pouvez facilement g\u00e9rer et lire l&rsquo;\u00e9tat centralis\u00e9 de votre application. Continuez \u00e0 explorer les fonctionnalit\u00e9s avanc\u00e9es de Redux pour am\u00e9liorer vos projets React!<\/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\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React\" title=\"\">\n<\/a>\n\n\n<!-- Liens externes dofollow -->\n<p>Pour approfondir vos connaissances :<\/p>\n<ul>\n  <li>D\u00e9couvrez plus sur la gestion des \u00e9tats dans les applications React et Redux sur <a href=\"https:\/\/redux.js.org\/introduction\/getting-started\" target=\"_blank\" rel=\"dofollow noopener\">Redux Official Documentation<\/a>.<\/li>\n  <li>Consultez des tutoriels avanc\u00e9s sur <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"dofollow noopener\">React Official Documentation<\/a>.<\/li>\n  <li>Rejoignez la communaut\u00e9 de d\u00e9veloppeurs sur <a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/react-redux\" target=\"_blank\" rel=\"dofollow noopener\">StackOverflow<\/a> pour des discussions et solutions.<\/li>\n<\/ul>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Connecter Actions Redux React est une \u00e9tape essentielle pour optimiser la gestion de l&rsquo;\u00e9tat dans vos applications React. Apprendre \u00e0 int\u00e9grer les actions Redux&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3188,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6220","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\/6220","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=6220"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6220\/revisions"}],"predecessor-version":[{"id":6221,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6220\/revisions\/6221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3188"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}