Académique Documents
Professionnel Documents
Culture Documents
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 :
}
})
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 :
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 :
}
</table></center> ; };
}
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