voitureSlice.
js:
Avec Redux Toolkit, on peut définir des slices, qui encapsulent les actions et les réducteurs
associés pour une partie spécifique de l'état. Créons une slice pour gérer les voitures :
import { createSlice } from "@reduxjs/toolkit";
const initState = {
db:[{id:1, marque :"BMW"},
{id:2, marque :"GOLF 8"},
{id:3, marque :"AUDIT"},
{id:4, marque :"ALPHA ROMIO"}]
}
const voituresSlice = createSlice({
name : "voitures",
initialState : initState,
reducers:{
addVoitures: (state, action)=>{
state.db.push(action.payload);
// state.db = [...state.db, action.payload]
},
RemoveVoitures: (state, action)=>{
state.db = state.db.filter((v) => v.id !== action.payload)
},
UpdateVoitures: (state, action)=>{
state.db=state.db.map(voitu => (voitu.id===action.payload.id)?
{...voitu,marque:action.payload.marque}:voitu);
},
}
})
export default voituresSlice.reducer;
export const {addVoitures, RemoveVoitures, UpdateVoitures} =
voituresSlice.actions;
on peut Remarque que la fonction « createSlice » est une fonction de Redux Toolkit qui
génère automatiquement des reducers, des actions et des action creators en se basant sur un
objet définissant l'état initial et les fonctions réductrices.
Store.js
Créons maintenant le store basé sur le reducer généré dans le fichier précédent :
import { configureStore } from "@reduxjs/toolkit";
import voiturereducer from "./voituresSlice";
const store =configureStore({
reducer :{
voitures : voiturereducer
}
})
export default store;
App.js
Dans le composant principal, on va dispatcher les actions déjà générées et lire les données à
partir du store :
import React from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Link } from 'react-router-dom';
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
//importer les actions générées
import { addVoitures , RemoveVoitures, UpdateVoitures} from
"./voituresSlice";
//composant princiapl qui contient un menu
function App() {
return (
<BrowserRouter>
<nav>
<ul>
<li><Link to="/">Afficher</Link></li>
<li><Link to="/ajouter">Ajouter</Link></li>
<li><Link to="/supprimer">Supprimer</Link></li>
<li><Link to="/modifier">Modifier</Link></li>
</ul>
</nav>
<br></br><br></br>
<div className="main-route-place">
<Routes>
<Route path="/" element={<Afficher />} />
<Route path="/ajouter" element={<Ajouter />} />
<Route path="/supprimer" element={<Supprimer />} />
<Route path="/modifier" element={<Modifier />} />
</Routes>
</div> </BrowserRouter>);}
// Composant Afficher pour afficher les voitures
const Afficher = () => {
//lire les données du store du reducer voitures(décalré dans le store)
const voitures = useSelector(state => state.voitures.db);
const dispatch = useDispatch();
const [voitureMarque, setVoitureMarque] = useState();
const handleDelete = (id) =>{
window.confirm('vous êtes sûr de supprimer ?') &&
dispatch(RemoveVoitures(id))
}
return <center>
<input type="text" placeholder="Marque" value={voitureMarque}
onChange={(e)=>setVoitureMarque(e.target.value)} /> <h3>Liste des
Voitures</h3> <table border="0" width="80%">
{
voitures.map(voitu => <tr key={voitu.id}><td>{voitu.id
}</td><td>{voitu.marque }</td><td>
<button
onClick={()=>dispatch(RemoveVoitures(voitu.id))}>Supprimer</button></td><td>
<button onClick={()=>{dispatch(UpdateVoitures( {id:voitu.id,
marque :voitureMarque})) ; setVoitureMarque('');}}>Modifier</button>
</td><td>
<button className="btn btn-danger"
onClick={()=>handleDelete(voitu.id)} >supprimer avec
confirmation</button></td></tr>)
}
</table></center> ; };
// Composant Ajouter pour ajouter une voiture
const Ajouter = () => {
const [voitureId, setVoitureId] = useState();
const [voitureMarque, setVoitureMarque] = useState();
const dispatch = useDispatch();
const handleAdd= (e)=>{
e.preventDefault();
dispatch(addVoitures({id:voitureId, marque :voitureMarque}))
setVoitureId('');
setVoitureMarque('');
}
return <>
<form onSubmit={handleAdd}>
<input type="text" placeholder="id" value={voitureId}
onChange={(e)=>setVoitureId(e.target.value)} />
<input type="text" placeholder="Marque" value={voitureMarque}
onChange={(e)=>setVoitureMarque(e.target.value)} />
<input type="submit" value="Ajouter Voiture"/>
</form></> };
// Composant Supprimer pour supprimer une voiture
const Supprimer = () => {
const voitures = useSelector(st => st.voitures.db);
const dispatch = useDispatch();
const [voitureId, setVoitureId] = useState();
const handledelete= (e)=>{
e.preventDefault();
dispatch(RemoveVoitures(voitureId))
setVoitureId('');
}
return <div>
<form onSubmit={handledelete}>
<input type="text" placeholder="id" value={voitureId}
onChange={(e)=>setVoitureId(e.target.value)} />
<input type="submit" value="Supprimer Voiture"/>
<center> <h3>Liste des Voitures</h3> <table border="0" width="80%">
{ voitures.map(voitu => <tr key={voitu.id}><td>{voitu.id
}</td><td>{voitu.marque }</td></tr>) }
</table></center> </form></div>;
};
// Composant Modifier pour modifier une voiture
const Modifier = () => {
const voitures = useSelector(st => st.voitures.db);
const [voitureMarque, setVoitureMarque] = useState();
const [voitureId, setVoitureId] = useState();
const dispatch = useDispatch();
const handleUpdate= (e)=>{
e.preventDefault();
dispatch(UpdateVoitures({id:Number(voitureId), marque :voitureMarque}))
setVoitureId('');
setVoitureMarque('');
}
return <div>
<form onSubmit={handleUpdate}>
<input type="text" placeholder="id" value={voitureId}
onChange={(e)=>setVoitureId(e.target.value)} />
<input type="text" placeholder="Marque" value={voitureMarque}
onChange={(e)=>setVoitureMarque(e.target.value)} />
<input type="submit" value="Modifier Voiture"/>
<center> <h3>Liste des Voitures</h3> <table border="0" width="80%">
{ voitures.map(voitu => <tr key={voitu.id}><td>{voitu.id
}</td><td>{voitu.marque }</td></tr>) }
</table></center> </form></div>;
};
export default App;
figure1:le composant App au démarrage
