TP proposé par: ELGARRAI Zineb
TP2: React js + Redux
Objectifs :
Comprendre les concepts fondamentaux de Redux, y compris les actions, les reducers et le store.
Créer des composants React fonctionnels et utiliser useSelector et useDispatch pour interagir avec le
store Redux.
➤ Mettre en place un routage simple pour naviguer entre différents éléments de l'application.
Partie I:
On voudrait Créer un gestionnaire de clients qui permet d'ajouter, afficher et supprimer des clients.
1. Créer Store.js pour configurer le store redux comme suit :
// store.js
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import clientReducer from './reducer';
const store = createStore(clientReducer);
export default store;
2. Créez un fichier actions.js pour définir les actions comme suit:
// actions.js
export const ADD _CLIENT = 'ADD_CLIENT';
export const FILTER_CLIENTS = 'FILTER_CLIENTS';
export const addClient = (client) => ({
type: ADD_CLIENT,
payload: client,
});
export const filterClients = (email) => ({
type: FILTER_CLIENTS,
payload: email,
});
3. Créer ClientReducer.js qui représente le reducer. Le reducer définit l'etat initial comme suit:
const initialState = { clients: [], filteredClients: [], };
Et décrit les traitements à faire pour chaque action:
// reducer.js
import { ADD_CLIENT, FILTER_CLIENTS } from './actions';
const initialState = {
clients: [],
filteredClients: [],
};
const clientReducer = (state = initialState, action) => {
switch (action.type) {
case ADD CLIENT:
const updatedClients = [...state.clients, action.payload];
return {
...state,
clients: updatedClients,
filteredClients: updatedClients, // Met à jour aussi la liste filtrée
};
case FILTER CLIENTS:
const filtered = state.clients.filter((client) =>
client.email.toLowerCase().includes(action.payload.toLowerCase())
);
return {
...state,
filteredClients: filtered,
};
default:
return state;
};
export default clientReducer;
4. Créer un composant ClientForm Ce formulaire doit contenir des champs de saisie pour le nom et
l'email du client, ainsi qu'un bouton pour soumettre le formulaire.
5. Créer un composant ListClients qui permet d'afficher la liste des clients sous format table html
6. Créer un composant RechercherClient qui permet de rechercher des clients par email.
7. Créer le composant Accueil qui représente la page d'accueil de l'application.
8. Dans le composant App, configurer le routage
