Crud React : ( Title , Price) : AUTH USING REACT-REDUX : Definitions :

CREATE: npm i –save react-redux 1-React.js est une bibliothèque JavaScript open-source
import { useState } from "react"; #reduxjs/toolkit développée par Facebook
import { useNavigate } from "react-router-dom"; qui permet de créer des interfaces utilisateur interactives
et réutilisables.
1-Store.js
function ProductCreate() {
Import {configureStore} from 2- Un composant React est une entité réutilisable qui
const navigate = useNavigate();
const [title, setTitle] = useState(""); “@reduxjs/tookit” encapsule la logique
const [price, setPrice] = useState(""); Export const store =configureStore({
const onTitleChange = (e) => { reducer:{ auth:authReducer} 3- Les propriétés (props) sont des objets JavaScript
setTitle(e.target.value); }; }) utilisés pour passer des données d'un composant
const onPriceChange = (e) => { parent à un composant enfant .
2-AuthActions.js :
setPrice(e.target.value); }; export const LOGIN_SUCCESS =
const onFormSubmit = (e) => { 4- L'état (state) est un objet JavaScript qui représente les
'LOGIN_SUCCESS';
e.preventDefault(); }; données internes d'un composant.
export const LOGOUT = 'LOGOUT';
navigate(“/products”) export const loginSuccess = () => {
return ( 5- Le rendu conditionnel est le mécanisme utilisé pour
return {type: LOGIN_SUCCESS,};};
<> afficher ou masquer des éléments en fonction d'une
export const logout = () => {
<h1>Nouveau Produit</h1> condition.
return {type: LOGOUT,};
<form onSubmit={onFormSubmit}> };
<input value={title} 6- React Router est une bibliothèque de routage pour
3- authReducer.js: React. fournissant des composants
onChange={onTitleChange}
import { LOGIN_SUCCESS, LOGOUT } from tels que BrowserRouter, Route et Link.
/> <br />
'../actions/authActions';
<input value={price}
const initialState = {isAuthenticated: false,}; 7- Redux est une bibliothèque de gestion d'état
onChange={onPriceChange} type="number" />
export const authReducer = (state = prévisible pour les applications JavaScript,
<br />
initialState, action) => { switch (action.type) {
<input type="submit" value="Créer" />
case LOGIN_SUCCESS: return { ...state, 8- JSX est une extension de syntaxe utilisée dans React
</form></> ) ;}
isAuthenticated: true, }; pour décrire la structure et l'apparence des composants.
export default ProductCreate;
case LOGOUT: return { ...state,
------------------------------------------------------------------
isAuthenticated: false, }; default: return 9- Un composant contrôlé est un composant React dont
UPDATE: state; } }; la valeur est entièrement contrôlée par l'état (state) de
function ProductEdit(prod,onSave){ 4-Index.js : React.
const [editProd , setEditProd]=useState({… import { configureStore } from
prod}); “@reduxjs/tookit ; 10- La méthode useState() est un Hook de React qui
const InputChange=(e){ import authReducer from './authReducer'; permet à un composant fonctionnel de gérer son état
setEditProd({…editProd,
interne
[e.target.name]:e.target.value});}, export const rootReducer = configureStore ({
const HandleSave=()=>{ reducer:{ auth:authReducer} 11-La méthode useEffect() est un Hook de React qui
onSave(editProd), }; }); permet d'effectuer des effets de côté dans un composant
} 5-App.js : fonctionnel.
return ( <> import React from 'react';
<h1>Edite Produit</h1> import { useSelector, useDispatch } from 12 - Un middleware dans React.js est une fonction qui
<form> 'react-redux'; s'interpose entre l'envoi d'une action et son traitement
<input name=”name” , import { loginSuccess, logout } from par les reducers.
value=”{editProd.name}” './redux/actions/authActions';
onChange={ InputChange} />
13- Axios est une bibliothèque JavaScript populaire
<button> onclick={HandleSave}</button> export function App() { utilisée pour effectuer des requêtes HTTP depuis un
</form> const isAuthenticated = useSelector(state => navigateur ou un serveur .
) ;} state.auth.isAuthenticated);
export default ProductEdit ; const dispatch = useDispatch(); 14- dispatch est une fonction fournie par Redux qui
------------------------------------------------------------------
permet d'envoyer une action vers le store Redux
READ & DELETE: const handleLogin = () => {
function PoductsPage(){ dispatch(loginSuccess()); }; 15- un reducer est une fonction qui spécifie comment
const [products, setProducts] = useState([]);
l'état de l'application évolue en réponse à une action
useEffect(() => { const handleLogout = () => { envoyée au store Redux.
fetch(" http://localhost:5000/products") dispatch(logout()); };
.then((res) => res.json()) return ( 16-le store est l'objet central qui contient l'état global de
.then((data) => {setProducts(data);});},[]); <div> {isAuthenticated ? ( l'application et gère les actions et les reducers.
<button
const onDelete = (e) => { onClick={handleLogout}>Déconnexion</butto 17- useDispatch est un hook fourni par la bibliothèque
fetch("http://localhost:5000/products", { n> ) : ( React-Redux
method: "DELETE", }) <button
.then((res) => res.json()) .then((data) => { onClick={handleLogin}>Connexion</button> ) 18- DOM (Document Object Model) est une
console.log(data); }); } représentation hiérarchique des éléments HTML, XML ou
</div> ); } XHTML d'une page web.
return ( <> <h1>Products Page</h1>
GET: La méthode GET est utilisée pour récupérer des
<table ><thead><tr>
données à partir d'une ressource spécifiée.
<th>#</th> <th>Titre</th>
<th>Prix</th> <th></th></tr> </thead>
POST: La méthode POST est utilisée pour envoyer des
<tbody> {products.map((p) => (
données à un serveur afin de créer ou de mettre à jour
<tr key={p.id}>
une ressource.
<td>{p.id}</td>
<td>
PUT: La méthode PUT est utilisée pour mettre à jour
<Link to={`/products/${p.id}`}>{p.title}</Link>
une ressource spécifiée.
</td> <td>{p.price}</td><td>
<button onClick={onDelete}>x</button>
DELETE: La méthode DELETE est utilisée pour
</td></tr>))}</tbody>
supprimer une ressource spécifiée sur le serveur
</table> </> ;}
export default ProductPage ;
useSelector : useSelector est un hook fourni par la
bibliothèque React Redux. Il est utilisé dans les
composants React pour sélectionner et extraire des
données spécifiques à partir du store Redux de
l'application.