Redux & Routing
EL BOUZIDI Mohammed
EL BOUFARHI Saad
Table of contents
01 02 03
Definition Les objectif de Examples de
Redux Redux Redux
04 05 06
Definition Les objectif de Examples
Routing Routing Routing
01
Definition Redux
C’est quoi Redux?
Redux est une bibliothèque open-source JavaScript utilisée pour gérer l'état
d'une application. Elle est principalement associée à React, bien qu'elle puisse
être utilisée avec d'autres bibliothèques et frameworks. Redux a gagné en
popularité grâce à sa simplicité et à son efficacité pour gérer l'état global de
l'application.
Et Nous pouvons installer redux via cette commande:
npm install redux react-redux
Example
02
Les objectif de Redux
Les objectif de Redux
Prévisibilité Transparence
de l'état de l'état
Flexibilité Facilité de
débogage
03
Examples de Redux
Examples Redux
1. Assurez-vous d’avoir React Redux
installé dans votre projet. Vous pouvez
l’installer avec npm :
npm install redux react-redux
Examples Redux
2: Créez un réducteur (reducer) qui gérera l'état du
compteur. Voici un exemple de fichier
"[Link]"
Examples Redux
[Link]éez un fichier d'action (action) pour définir les
actions que vous pouvez effectuer sur le compteur.
Voici un exemple de fichier "[Link]" :
Examples Redux
4:Maintenant, dans votre composant React, vous pouvez connecter
le composant au magasin Redux et utiliser les actions pour modifier
le compteur. Voici un exemple de composant React dans
"[Link]" :
Examples Redux
5:Intégrez le composant Counter dans votre application React
comme bon vous semble. Assurez-vous d'encapsuler votre
application dans un, pour fournir l'accès au magasin Redux.
04
Definition Routing
C’est quoi Routing?
Le "routing" (ou routage) fait référence au processus de gestion de la
navigation entre différentes vues ou pages dans une application web ou
mobile. Cela permet aux utilisateurs de passer d'une page à une autre, de
manière fluide, en fonction de leurs interactions ou de leurs actions.
Et Nous pouvons installer routing via cette commande:
npm install react-routeur-dom
Example
05
Les objectif Routing
Les objectif de Redux
Navigation Gestion de
transparente l'URL
Structure de Gestion de
l'application l'historique
05
Examples Routing
Examples Routing
1. Assurez-vous d’avoir React Router
installé dans votre projet. Vous pouvez
l’installer avec npm ou yarn:
Npm install react-routeur-dom
Examples Routing
2. Ensuite, importez les composants
nécessaires de React Router dans
votre application :
Examples Routing
3. Créez vos composants React qui représentent les
différentes pages de votre application. Par exemple, vous
pourriez avoir un composant pour la page d’accueil et un
autre pour la page de contact :
Examples Redux
4. Maintenant, vous pouvez configurer vos routes à l’intérieur
de votre composant principal. Utilisez les composants
Router, Route, et Switch pour définir vos routes. Le
composant Switch affiche la première Route qui
correspond à l’URL actuelle :
Examples Redux
5. Enfin, affichez votre composant App dans votre
fichier [Link] :
En conclusion, Redux et le routage sont
deux concepts essentiels dans le
développement d'applications web et
mobile, chacun ayant ses propres
objectifs et avantages spécifiques.
—Conclusion Redux &
Routing
MERCI DE VOTRE ATTENSION
—El BOUZIDI & EL BOUFARHI