OFFICE DE LA FORMATION PROFESSIONNELLE
ET DE LA PROMOTION DE TRAVAIL
Direction Régionale Fès – Meknès
ISTA ADARISSA
Filière : Développement digital – option web full stack
Module : M204 – Développement front-end
Formatrice : A. YOUALA
Correction de l’exercice 4 - TP4 en Redux Toolkit
L’objectif de l’exercice est de créer une application React qui permet de gérer les tâches (ajouter,
modifier l’état d’une tâche et supprimer une tâche) :
Liste des fichiers crées :
TachesSlice.js ........................................................................................................................................... 1
Store.js ..................................................................................................................................................... 2
Components/NewTache .......................................................................................................................... 2
Components/CTache.js ............................................................................................................................ 3
Components/ListeTaches.js ..................................................................................................................... 4
Components/App.js ................................................................................................................................. 4
TachesSlice.js
import { createSlice } from "@reduxjs/toolkit";
const TachesSlice = createSlice({
name: "taches",
initialState: {
list: [],
},
reducers: {
ajouterTache: (state, action) => {
1
state.list.push({
id: new Date().getTime(),
description: action.payload,
terminee: false,
});
},
supprimerTache: (state, action) => {
state.list = state.list.filter((tache) => tache.id !== action.payload);
},
changerEtat: (state, action) => {
const tache = state.list.find((t) => t.id === action.payload);
if (tache) tache.terminee = !tache.terminee;
},
},
});
export const { ajouterTache, supprimerTache, changerEtat } =
TachesSlice.actions;
export default TachesSlice.reducer;
Store.js
import { configureStore } from "@reduxjs/toolkit";
import TachesReducer from "./TachesSlice";
export default configureStore({
reducer: {
taches: TachesReducer,
},
});
Components/NewTache
import { useRef } from "react";
import { useDispatch } from "react-redux";
import { ajouterTache } from "../TachesSlice";
const NewTache = () => {
const description = useRef();
const dispatch = useDispatch();
function handleSubmit(e) {
e.preventDefault();
if (description) {
dispatch(ajouterTache(description.current.value));
description.current.value = "";
}
}
return (
<form onSubmit={handleSubmit} className="d-flex align-items-center m-3">
<input
type="text"
placeholder="Entrez une description"
className="form-control"
ref={description}
/>
<button type="submit" className="btn btn-primary ">
Ajouter
</button>
</form>
);
};
export default NewTache;
Components/CTache.js
import { useDispatch } from "react-redux";
import { changerEtat, supprimerTache } from "../TachesSlice";
const CTache = ({ tache }) => {
const dispatch = useDispatch();
function handleSupprimer() {
if (
window.confirm(
`voulez vous vraiment supprimer la tâche ${tache.description}?`
)
)
dispatch(supprimerTache(tache.id));
}
return (
<div>
<li className="list-group-item d-flex align-items-center mb-2">
<input
type="checkbox"
checked={tache.terminee}
id={tache.id}
onChange={() => dispatch(changerEtat(tache.id))}
className="form-check-input me-2"
/>
<label htmlFor={tache.id} className="form-label mx-4">
{tache.description}
</label>
<button onClick={handleSupprimer} className="btn btn-danger">
Supprimer
</button>
</li>
</div>
);
};
export default CTache;
Components/ListeTaches.js
import { useSelector } from "react-redux";
import CTache from "./CTache";
const ListeTaches = () => {
const list = useSelector((st) => st.taches.list);
return (
<div className="w-75 mx-auto">
<ul className="list-group">
{list.length > 0 ? (
list.map((tache, i) => <CTache tache={tache} key={i}></CTache>)
) : (
<p>La liste est vide</p>
)}
</ul>
</div>
);
};
export default ListeTaches;
Components/App.js
import { Provider } from "react-redux";
import store from "../store";
import NewTache from "./NewTache";
import ListeTaches from "./ListeTaches";
const App = () => {
return (
<Provider store={store}>
<div className="container mt-4">
<h2 className="text-center mb-3">Gestion des tâches</h2>
<NewTache></NewTache>
<ListeTaches></ListeTaches>
</div>
</Provider>
);
};
export default App;
