{"id":6222,"date":"2026-01-12T12:54:07","date_gmt":"2026-01-12T12:54:07","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/passer-donnees-dynamiques-actions-redux\/"},"modified":"2026-01-12T12:54:13","modified_gmt":"2026-01-12T12:54:13","slug":"passer-donnees-dynamiques-actions-redux","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/passer-donnees-dynamiques-actions-redux\/","title":{"rendered":"18.6 Passer des Donn\u00e9es Dynamiques avec Actions Redux"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Donn\u00e9es Dynamiques avec Actions Redux<\/strong> est essentiel pour construire des applications React performantes et maintenables. Ce tutoriel explique comment g\u00e9rer efficacement le flux de donn\u00e9es \u00e0 l&rsquo;aide des Actions Redux afin de rendre votre app plus r\u00e9active et simple \u00e0 maintenir. Plongeons dans les d\u00e9tails et voyons comment utiliser Redux pour g\u00e9rer dynamiquement les donn\u00e9es dans votre application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Actions 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\/706149748?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();\n    }\n});\n<\/script>\n\n\n\n<p>Une action Redux est un \u00e9v\u00e9nement qui d\u00e9crit un changement dans l&rsquo;application. Les actions sont le seul moyen de transmettre des donn\u00e9es de votre application \u00e0 votre store Redux. Elles peuvent transporter des informations dynamiques pour mettre \u00e0 jour le state global. Comprendre et impl\u00e9menter les actions Redux de mani\u00e8re efficace est crucial pour le d\u00e9veloppement React avec Redux.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Actions Dynamiques en Redux<\/h3>\n\n\n\n<p>Pour manipuler le store Redux et g\u00e9rer le state de mani\u00e8re dynamique, vous devrez cr\u00e9er des actions qui peuvent accueillir des donn\u00e9es variables. Ces donn\u00e9es sont souvent transmises via un <code>payload<\/code>. Voici un exemple simple de cr\u00e9ation d&rsquo;actions dynamiques en Redux :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Action Types\nconst SET_USER = 'SET_USER';\nconst UPDATE_PROFILE = 'UPDATE_PROFILE';\n\n\/\/ Action Creators\n\n\/\/ Passe un objet utilisateur dynamique\nexport const setUser = (user) => {\n  return {\n    type: SET_USER,\n    payload: user,\n  };\n};\n\n\/\/ Passe des donn\u00e9es de profil modifi\u00e9es pour la mise \u00e0 jour\nexport const updateProfile = (profileData) => {\n  return {\n    type: UPDATE_PROFILE,\n    payload: profileData,\n  };\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Connecter les Actions au Store avec le R\u00e9ducteur<\/h3>\n\n\n\n<p>Une fois vos actions d\u00e9finies, elles doivent \u00eatre connect\u00e9es au store par le biais d&rsquo;un r\u00e9ducteur (reducer). Le r\u00e9ducteur \u00e9coute les actions dispatch\u00e9es et met \u00e0 jour le state en cons\u00e9quence. Voici comment cela fonctionne :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Initial State\nconst initialState = {\n  user: {},\n  profile: {},\n};\n\n\/\/ Reducer\nconst rootReducer = (state = initialState, action) => {\n  switch (action.type) {\n    case SET_USER:\n      return { ...state, user: action.payload };\n    case UPDATE_PROFILE:\n      return { ...state, profile: { ...state.profile, ...action.payload } };\n    default:\n      return state;\n  }\n};\n\nexport default rootReducer;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Dispatching Actions pour Mettre \u00e0 Jour le Store<\/h3>\n\n\n\n<p>Pour d\u00e9clencher une modification du store, vous devez dispatcher une action depuis un composant. Cela peut \u00eatre fait en utilisant une fonction dispatch et en appelant l&rsquo;action avec les donn\u00e9es n\u00e9cessaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { useDispatch } from 'react-redux';\nimport { setUser, updateProfile } from '.\/actions';\n\nconst UserProfile = () => {\n  const dispatch = useDispatch();\n\n  const updateUser = () => {\n    \/\/ Fake user data\n    const userData = { id: 1, name: 'John Doe', age: 30 };\n    dispatch(setUser(userData));\n  };\n\n  const modifyProfile = () => {\n    \/\/ Fake profile data\n    const profileData = { location: 'Paris', bio: 'Web Developer' };\n    dispatch(updateProfile(profileData));\n  };\n\n  return (\n    <div>\n      <button onClick={updateUser}>Set User<\/button>\n      <button onClick={modifyProfile}>Update Profile<\/button>\n    <\/div>\n  );\n};\n\nexport default UserProfile;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les S\u00e9lecteurs pour Acc\u00e9der aux Donn\u00e9es du Store<\/h3>\n\n\n\n<p>Les s\u00e9lecteurs sont des fonctions qui r\u00e9cup\u00e8rent des parties du state. Utilis\u00e9s dans vos composants, ils permettent d&rsquo;acc\u00e9der aux donn\u00e9es mises \u00e0 jour par vos actions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { useSelector } from 'react-redux';\n\nconst UserProfileView = () => {\n  const user = useSelector((state) => state.user);\n  const profile = useSelector((state) => state.profile);\n\n  return (\n    <div>\n      <h1>Profil de l'utilisateur<\/h1>\n      <p>Nom: {user.name}<\/p>\n      <p>\u00c2ge: {user.age}<\/p>\n      <h2>Profil<\/h2>\n      <p>Localisation: {profile.location}<\/p>\n      <p>Bio: {profile.bio}<\/p>\n    <\/div>\n  );\n};\n\nexport default UserProfileView;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les Donn\u00e9es Dynamiques avec Actions Redux<\/h2>\n\n\n\n<p>Ma\u00eetriser <strong>la gestion de donn\u00e9es dynamiques avec Actions Redux<\/strong> est crucial pour les applications React de grande \u00e9chelle. L&rsquo;utilisation d&rsquo;actions et de r\u00e9ducteurs pour g\u00e9rer l&rsquo;\u00e9tat de mani\u00e8re pr\u00e9visible et efficace rend vos applications plus robustes et claires. En explorant plus en d\u00e9tail Redux et ses fonctionnalit\u00e9s, vous pourrez concevoir des applications React qui sont \u00e0 la fois performantes et maintenables.<\/p>\n<p>Pour approfondir vos comp\u00e9tences, consultez nos articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">l&rsquo;introduction et les avantages de React<\/a>, ou d\u00e9couvrez <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">les diff\u00e9rences entre les applications Single Page et Multi Page<\/a>. Pour ceux int\u00e9ress\u00e9s par les nouveaut\u00e9s JavaScript essentielles pour React, explorez <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\" target=\"_blank\" rel=\"noopener\">cet article sur les nouveaut\u00e9s JavaScript<\/a>.<\/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=\"Learnify Formation React et Redux Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Donn\u00e9es Dynamiques avec Actions Redux est essentiel pour construire des applications React performantes et maintenables. Ce tutoriel explique comment g\u00e9rer efficacement le flux de&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3238,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6222","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\/6222","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=6222"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6222\/revisions"}],"predecessor-version":[{"id":6223,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6222\/revisions\/6223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3238"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}