{"id":6214,"date":"2025-12-15T12:54:29","date_gmt":"2025-12-15T12:54:29","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/comprendre-fonctionnement-redux\/"},"modified":"2025-12-15T12:54:34","modified_gmt":"2025-12-15T12:54:34","slug":"comprendre-fonctionnement-redux","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/comprendre-fonctionnement-redux\/","title":{"rendered":"18.2 Comprendre le Fonctionnement de Redux"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Fonctionnement Redux<\/strong> est essentiel pour g\u00e9rer efficacement l&rsquo;\u00e9tat de vos applications React de mani\u00e8re pr\u00e9visible et centralis\u00e9e. En explorant les concepts fondamentaux de <strong>Redux<\/strong>, vous apprendrez comment structurer et architecturer vos applications pour am\u00e9liorer leur \u00e9volutivit\u00e9 et leur robustesse. Dans ce tutoriel, nous plongeons dans les fondamentaux de Redux, enrichis par des exemples de code pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Fonctionnement Redux<\/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\/706148724?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                    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 une librairie JavaScript centrale dans l&rsquo;\u00e9cosyst\u00e8me React pour la gestion de l&rsquo;\u00e9tat. Il fonctionne selon trois principes fondamentaux\u00a0: l&rsquo;\u00e9tat global de l&rsquo;application est g\u00e9r\u00e9 dans un unique <strong>store<\/strong>, l&rsquo;\u00e9tat est immuable et doit \u00eatre mis \u00e0 jour par des <strong>actions<\/strong>, et les <strong>reducers<\/strong> d\u00e9terminent comment l&rsquo;\u00e9tat change en r\u00e9ponse aux actions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation d\u2019un Store Redux<\/h3>\n\n\n\n<p>Cr\u00e9er un store Redux est la premi\u00e8re \u00e9tape pour utiliser Redux dans une application. Cela implique de d\u00e9finir un reducer (ou plusieurs en utilisant combineReducers) et de le passer \u00e0 la fonction <code>createStore<\/code> fournie par Redux. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { createStore } from 'redux';\n\n\/\/ D\u00e9finir le reducer\nconst initialState = { count: 0 };\nfunction counterReducer(state = initialState, action) {\n  switch (action.type) {\n    case 'INCREMENT':\n      return { count: state.count + 1 };\n    case 'DECREMENT':\n      return { count: state.count - 1 };\n    default:\n      return state;\n  }\n}\n\n\/\/ Cr\u00e9er le store\nconst store = createStore(counterReducer);\n\nconsole.log(store.getState()); \/\/ { count: 0 }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Actions en Redux<\/h3>\n\n\n\n<p>Les actions sont des objets JavaScript simples contenant un <code>type<\/code>, et \u00e9ventuellement un <code>payload<\/code>. Elles d\u00e9crivent ce qu&rsquo;il se passe dans l&rsquo;application, par exemple, un clic sur un bouton, une requ\u00eate r\u00e9seau aboutie, etc. Voici comment d\u00e9finir des actions simples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9finir des actions\nconst incrementAction = { type: 'INCREMENT' };\nconst decrementAction = { type: 'DECREMENT' };\n\n\/\/ Dispatcher une action pour changer l'\u00e9tat\nstore.dispatch(incrementAction);\nconsole.log(store.getState()); \/\/ { count: 1 }\n\nstore.dispatch(decrementAction);\nconsole.log(store.getState()); \/\/ { count: 0 }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Connecter Redux \u00e0 React<\/h3>\n\n\n\n<p>Pour connecter Redux \u00e0 une application React, vous pouvez utiliser la biblioth\u00e8que <code>react-redux<\/code>. Elle fournit des composants comme <code>Provider<\/code> pour rendre le store accessible \u00e0 toute l&rsquo;application, et des fonctions comme <code>connect<\/code> pour lier les composants React au store Redux.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider, connect } from 'react-redux';\n\n\/\/ Composant React\nfunction Counter({ count, onIncrement, onDecrement }) {\n  return (\n    <div>\n      <button onClick={onDecrement}>-<\/button>\n      <span>{count}<\/span>\n      <button onClick={onIncrement}>+<\/button>\n    <\/div>\n  );\n}\n\n\/\/ Map State and Dispatch to Props\nconst mapStateToProps = state => ({ count: state.count });\nconst mapDispatchToProps = dispatch => ({\n  onIncrement: () => dispatch({ type: 'INCREMENT' }),\n  onDecrement: () => dispatch({ type: 'DECREMENT' })\n});\n\n\/\/ Connecter le composant\nconst ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);\n\n\/\/ Rendre le Counter\nReactDOM.render(\n  <Provider store={store}>\n    <ConnectedCounter \/>\n  <\/Provider>,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Middleware comme Redux Thunk pour la Gestion Asynchrone<\/h3>\n\n\n\n<p>Pour g\u00e9rer les actions asynchrones, telles que les appels API, les middlewares comme <code>redux-thunk<\/code> permettent de dispatcher des actions asynchrones. Installez le middleware dans le store Redux pour supporter les actions qui retournent des fonctions.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { createStore, applyMiddleware } from 'redux';\nimport thunk from 'redux-thunk';\n\n\/\/ Action asynchrone\nfunction fetchData() {\n  return async dispatch => {\n    dispatch({ type: 'FETCH_START' });\n    try {\n      const response = await fetch('http:\/\/api.example.com\/data');\n      const data = await response.json();\n      dispatch({ type: 'FETCH_SUCCESS', payload: data });\n    } catch (error) {\n      dispatch({ type: 'FETCH_ERROR', error });\n    }\n  };\n}\n\n\/\/ Utiliser le store avec le middleware\n\nconst storeWithMiddleware = createStore(\n  counterReducer,\n  applyMiddleware(thunk)\n);\n\nstoreWithMiddleware.dispatch(fetchData());\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Approfondir les Concepts Redux pour des Applications Avanc\u00e9es<\/h3>\n\n\n\n<p>Pour explorer davantage Redux, vous pouvez utiliser des outils comme <code>Redux DevTools<\/code> qui aide \u00e0 surveiller les actions et l&rsquo;\u00e9tat de votre application en temps r\u00e9el, ou vous pouvez impl\u00e9menter des fonctionnalit\u00e9s comme le routage avec <code>react-router-redux<\/code>. Ces outils permettent d&rsquo;am\u00e9liorer le d\u00e9veloppement et la maintenance de grandes applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Optimisation et Bonnes Pratiques avec Redux<\/h3>\n\n\n\n<p>Voici quelques bonnes pratiques pour optimiser l&rsquo;utilisation de Redux\u00a0:<\/p>\n<ul>\n    <li><strong>Normalisation de l&rsquo;\u00e9tat<\/strong> : Gardez l&rsquo;\u00e9tat aussi plat que possible pour \u00e9viter la redondance et faciliter les mises \u00e0 jour.<\/li>\n    <li><strong>M\u00e9morisation<\/strong> : Utilisation de biblioth\u00e8ques comme Reselect pour cr\u00e9er des s\u00e9lecteurs m\u00e9moris\u00e9s et optimiser les performances de l&rsquo;application.<\/li>\n    <li><strong>Splitting du Code<\/strong>: Divisez votre code redux en actions, reducers, et thunks structur\u00e9s pour un meilleur souci de lisibilit\u00e9 et scalabilit\u00e9.<\/li>\n<ul>\n<p>Pour des conseils sur comment d\u00e9velopper un projet avec React, vous pourriez consulter notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation de pages multiples avec React<\/a>.<\/p>\n\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur le Fonctionnement de Redux<\/h2>\n\n\n\n<p>Le <strong>Fonctionnement Redux<\/strong> offre une approche rigoureuse pour g\u00e9rer l&rsquo;\u00e9tat de votre application, favorisant un flux de donn\u00e9es pr\u00e9visible et facilitant le d\u00e9veloppement d&rsquo;applications complexes. En capitalisant sur Redux, vous apprendrez \u00e0 construire des applications plus maintenables et \u00e9volutives. Pour approfondir votre compr\u00e9hension, consultez des ressources comme le <a href=\"https:\/\/redux.js.org\/\" target=\"_blank\" rel=\"noopener\">site officiel de Redux<\/a>, des tutoriels pratiques, et des formations en ligne comme celles sur <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a>. Pour un apprentissage approfondi, voyez aussi notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\" target=\"_blank\" rel=\"noopener\">l&rsquo;importance de Redux dans React<\/a>.<\/p>\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/apprendre-redux-basics\/156\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>D&rsquo;autres articles int\u00e9ressant pourraient inclure nos discussions sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-fonctionnement-redux\" target=\"_blank\" rel=\"noopener\">les d\u00e9tails du fonctionnement de Redux<\/a> et la <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation de votre premi\u00e8re application React<\/a>. De plus, d\u00e9couvrir des composants comme <a href=\"https:\/\/wikiform.fr\/codespace\/sections-firebase-axios-react-plan\" target=\"_blank\" rel=\"noopener\">Firebase int\u00e9gr\u00e9s avec React<\/a> pourraient vous donner un avantage.<\/p>\n\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=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Fonctionnement Redux est essentiel pour g\u00e9rer efficacement l&rsquo;\u00e9tat de vos applications React de mani\u00e8re pr\u00e9visible et centralis\u00e9e. En explorant les concepts fondamentaux de Redux,&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3181,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6214","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\/6214","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=6214"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6214\/revisions"}],"predecessor-version":[{"id":6215,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6214\/revisions\/6215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3181"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}