TP Application CRUD avec REACT/REDUX

Dans ce TP on souhaite réaliser une application CRUD (Create, Read, Update, Delete) avec REACT/
REDUX/ Bootstrap

Rappel

Redux est une bibliothèque JavaScript open-source utilisée pour gérer l'état d'une application web. Il
est souvent utilisé avec des frameworks tels que React ou Angular, bien qu'il puisse être utilisé avec
n'importe quel type d'interface utilisateur ou de bibliothèque JavaScript.

Redux met en œuvre un modèle de flux de données unidirectionnel, ce qui signifie que les données
de l'application suivent un flux prévisible à travers l'application. Il se compose de trois concepts
principaux :

1. Store : Le store est un objet JavaScript centralisé qui contient l'état global de l'application. Il
représente l'unique source de vérité pour l'état de l'application.

2. Actions : Les actions sont des objets JavaScript qui décrivent les événements qui se produisent
dans l'application. Elles sont émises par les composants de l'interface utilisateur et fournissent des
informations sur ce qui s'est passé.

3. Reducers: Les reducers sont des fonctions pures qui spécifient comment l'état de l'application
change en réponse aux actions. Ils prennent l'état actuel de l'application et une action en entrée, puis
retournent un nouvel état.

Redux encourage également l'utilisation d'un paradigme de programmation fonctionnelle et le

principe d'immuabilité des données, ce qui favorise une gestion de l'état plus prévisible et plus facile
à comprendre.

En résumé, Redux est utilisé pour gérer efficacement l'état global d'une application JavaScript, en
favorisant la prévisibilité, la cohérence et la facilité de testabilité.
Étape 1: Initialisation du projet

Commencez par initialiser un projet React et installez Redux et Bootstrap :

npx create-react-app react-redux-crud

cd react-redux-crud

npm install redux react-redux bootstrap

Étape 2: Configuration de Redux

Créez un dossier redux à la racine du projet et à l'intérieur de ce dossier, créez les fichiers actions.js,
reducers.js et store.js.

actions.js

redux/actions.js : Ce fichier contient les définitions des actions Redux. Il définit les différents types
d'actions que votre application peut effectuer, ainsi que les créateurs d'actions qui renvoient des
objets d'action.
reducers.js

redux/reducers.js : Ce fichier contient les reducers Redux. Les reducers sont des fonctions pures qui
décrivent comment l'état de l'application change en réponse aux actions. Ils prennent l'état actuel et
une action comme arguments, puis retournent un nouvel état.

store.js

redux/store.js : Ce fichier est responsable de la configuration et de la création du store Redux. Il

combine les reducers à l'aide de combineReducers() si nécessaire, puis crée le store en utilisant
createStore(). Le store est exporté pour être utilisé dans d'autres parties de l'application.
Étape 3: Création des composants React

App.js

index.js

Créer le dossier components et ajouter les fichiers AddUserForm.js et UserList.js

UserList.js
AddUserForm.js