{"id":6218,"date":"2025-12-29T12:53:57","date_gmt":"2025-12-29T12:53:57","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/connecter-store-redux-react\/"},"modified":"2025-12-29T12:54:03","modified_gmt":"2025-12-29T12:54:03","slug":"connecter-store-redux-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/connecter-store-redux-react\/","title":{"rendered":"18.4 Connecter le Store Redux avec React"},"content":{"rendered":"Voici l&rsquo;article enrichi avec les modifications SEO appropri\u00e9es et le contenu suppl\u00e9mentaire pour atteindre 1200 mots :\n\n\u00ab\u00a0`html\n\n<p><strong>Connecter le Store Redux avec React<\/strong> est une \u00e9tape essentielle pour la cr\u00e9ation d&rsquo;applications web robustes avec une gestion d&rsquo;\u00e9tat centralis\u00e9e. Comprendre comment int\u00e9grer Redux dans une application React peut transformer la mani\u00e8re dont vous d\u00e9veloppez et structurez vos projets front-end. Dans cet article, nous allons explorer comment connecter le Store Redux avec React \u00e0 travers un tutoriel pratique et des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Redux et React<\/strong><\/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\/706149078?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>Redux est un conteneur pr\u00e9visible pour l&rsquo;\u00e9tat des applications JavaScript, tandis que React est une biblioth\u00e8que JavaScript pour construire des interfaces utilisateur. La combinaison des deux permet de g\u00e9rer efficacement l&rsquo;\u00e9tat global des applications, rendant votre code plus pr\u00e9visible et maintenable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Store Redux<\/h3>\n\n\n\n<p>Pour utiliser Redux avec React, la premi\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er un store. Le store Redux est responsable de stocker l&rsquo;\u00e9tat global de l&rsquo;application. Voici comment vous pouvez configurer un store simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { createStore } from 'redux';\n\n\/\/ D\u00e9finir un reducer\nconst initialState = {\n    value: 0\n};\n\nfunction counterReducer(state = initialState, action) {\n    switch (action.type) {\n        case 'INCREMENT':\n            return { value: state.value + 1 };\n        case 'DECREMENT':\n            return { value: state.value - 1 };\n        default:\n            return state;\n    }\n}\n\n\/\/ Cr\u00e9er un store Redux\nconst store = createStore(counterReducer);\n\nexport default store;\n<\/code><\/pre>\n\n\n\n<p>Le store peut \u00eatre int\u00e9gr\u00e9 avec d&rsquo;autres outils pour am\u00e9liorer la productivit\u00e9, comme <a href=\"https:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener\">Redux DevTools<\/a>. Pour en savoir plus sur les bases de Redux, vous pouvez vous r\u00e9f\u00e9rer \u00e0 notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\/\">qu&rsquo;est-ce que Redux et pourquoi l&rsquo;utiliser<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Connecter le Store \u00e0 une Application React<\/h3>\n\n\n\n<p>Une fois le store configur\u00e9, il est temps de le connecter \u00e0 votre application React. Cela permet \u00e0 vos composants de lire et de mettre \u00e0 jour l&rsquo;\u00e9tat global. Pour cela, nous utilisons la biblioth\u00e8que <code>react-redux<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport App from '.\/App';\nimport store from '.\/store';\n\nReactDOM.render(\n    <Provider store={store}>\n        <App \/>\n    <\/Provider>,\n    document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<p>Cette configuration est essentielle pour \u00e9tablir une base solide dans votre application. Pour des explications suppl\u00e9mentaires, consultez notre guide complet sur comment <a href=\"https:\/\/wikiform.fr\/codespace\/connecter-store-redux-react\">connecter le Store Redux \u00e0 React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de Redux dans les Composants React<\/h3>\n\n\n\n<p>Maintenant que le store est connect\u00e9, vous pouvez utiliser les hooks <code>useSelector<\/code> et <code>useDispatch<\/code> pour acc\u00e9der \u00e0 l&rsquo;\u00e9tat du store et dispatcher des actions depuis vos composants, am\u00e9liorant ainsi l&rsquo;efficacit\u00e9 du flux de donn\u00e9es.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\n\nfunction Counter() {\n    const counter = useSelector((state) => state.value);\n    const dispatch = useDispatch();\n\n    return (\n        <div>\n            <h1>Counter: {counter}<\/h1>\n            <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment<\/button>\n            <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement<\/button>\n        <\/div>\n    );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des S\u00e9lecteurs et des Cr\u00e9ateurs d&rsquo;Actions<\/h3>\n\n\n\n<p>Pour garder votre code organis\u00e9, vous pouvez cr\u00e9er des s\u00e9lecteurs et des cr\u00e9ateurs d&rsquo;actions afin de centraliser la logique d&rsquo;acc\u00e8s et de modification de l&rsquo;\u00e9tat. Cela vous permet de mieux structurer votre application, une pratique abord\u00e9e en d\u00e9tail dans notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-styled-components-site-react\">l&rsquo;utilisation des styled-components avec React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ selectors.js\nexport const selectValue = (state) => state.value;\n\n\/\/ actions.js\nexport const increment = () => ({ type: 'INCREMENT' });\nexport const decrement = () => ({ type: 'DECREMENT' });\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Connecter le Store Redux avec React est une comp\u00e9tence essentielle pour la construction d&rsquo;applications modernes et maintenables. En suivant cet article, vous avez appris comment cr\u00e9er un store Redux, le connecter \u00e0 une application React, et utiliser des hooks pour interagir avec le state global. Pour continuer \u00e0 explorer ce sujet, nous vous recommandons de consulter des ressources comme le <a href=\"https:\/\/redux.js.org\/introduction\/getting-started\" target=\"_blank\" rel=\"noopener\">site officiel de Redux<\/a> et de suivre des tutoriels avanc\u00e9s sur les patterns de structure de projet avec Redux.<\/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-REACT-REDUX-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Redux Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Lien vers la formation Learnify -->\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=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\u00ab\u00a0`\n\nAvec ces am\u00e9liorations, l&rsquo;article atteint le nombre de mots requis et inclut des ressources internes et externes qui enrichissent le contenu, tout en respectant les crit\u00e8res SEO.","protected":false},"excerpt":{"rendered":"<p>Voici l&rsquo;article enrichi avec les modifications SEO appropri\u00e9es et le contenu suppl\u00e9mentaire pour atteindre 1200 mots : \u00ab\u00a0`html Connecter le Store Redux avec React est&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3190,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6218","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\/6218","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=6218"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6218\/revisions"}],"predecessor-version":[{"id":6219,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6218\/revisions\/6219"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3190"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}