CRUD REACT REDUX/TOOLKIT/ROUTE
READ/DELETE
src -> components -> products.jsx
import {React , useState} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { deleteProduct } from '../redux';
function Products() {
const products = useSelector((state) => state.product)
const dispatch = useDispatch()
return (
<div className=conatiner'>
<button className='btn btn-success' ><Link to='/addproduct'
className='text-white text-decoration-none' >+ Add Product</Link></button>
</div>
<table className=" table table-striped">
<thead className='bg-dark text-white'>
<tr>
<th>ID</th>
<th>TITLE</th>
<th>PRICE</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
{products && products.map((product) => {
return (
<tr key={product.id}>
<td>{product.id}</td>
<td>{product.title}</td>
<td>{product.price} $</td>
<td>
<button className='btn btn-warning btn-sm' ><Link
to={`/updateproduct/${product.id}`} className='text-white text-decoration-
none'>Modifier</Link></button>
<button className='btn btn-danger btn-sm' onClick={() =>
dispatch(deleteProduct(product.id))} <button>
</td> </tr>
) })}
</tbody> </table></div>
</div>
);}
export default Products;
CREATE
src -> components -> Addproducts.jsx
import React from 'react';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addProduct } from '../redux';
import { useNavigate } from 'react-router-dom';
function AddProduct() {
const [title, setTitle] = useState("");
const [price, setPrice] = useState("");
const dispatch = useDispatch()
const navigate=useNavigate()
const handelSubmit = (event) => {
event.preventDefault();
dispatch(addProduct({title,price}));
setTitle('');
setPrice('');
return navigate('/products')
}
return (
<div>
<h4> ADD PRODUCT</h4>
<form onSubmit={handelSubmit} >
<input type="text" className='form-control' value={title}
onChange={(e) => setTitle(e.target.value)} />
<input type="text" className='form-control' value={price}
onChange={(e) => setPrice(e.target.value)} />
<button className='btn btn-success '>Save</button>
</form>
</div>
);
}
export default AddProduct;
UPDATE
src -> components -> UpdateProducts.jsx
import React from 'react';
import { useState } from 'react';
import { useDispatch ,useSelector } from 'react-redux';
import { toggleProduct } from '../redux';
import { useNavigate, useParams } from 'react-router-dom';
function UpdateProduct() {
const parametre=useParams();
const products = useSelector((state) => state.product);
const product = products.find((item)=> item.id == parametre.id);
const [id, setId] = useState(product.id);
const [title, setUpdateTitle] = useState(product.title);
const [price, setUpdatePrice] = useState(product.price);
const dispatch = useDispatch()
const navigate=useNavigate()
const handelSubmit = (event) => {
event.preventDefault();
dispatch(toggleProduct({id,title,price}));
return navigate('/products')
}
return (
<div>
<h4> Update PRODUCT</h4>
<form onSubmit={handelSubmit} >
<input type="text" className='form-control' value={title}
onChange={(e) => setUpdateTitle(e.target.value)} />
<input type="text" className='form-control' value={price}
onChange={(e) => setUpdatePrice(e.target.value)} />
<button className='btn btn-success '>Update</button>
</div>
</form>
</div>
);
}
export default UpdateProduct;
STORE
src -> redux.jsx
import { configureStore, createSlice } from "@reduxjs/toolkit";
import data from './components/ProductsListe.json';
const productSlice = createSlice({
name: 'product',
initialState: data.products,
reducers: {
addProduct: (state, action) => {
const newProduct = {
id: Date.now(),
title: action.payload.title,
price: action.payload.price
}
state.push(newProduct)
},
toggleProduct: (state, action) => {
const product = state.find((item)=> item.id
== action.payload.id);
if(product){
product.title = action.payload.title;
product.price = action.payload.price
}
},
deleteProduct: (state, action) => {
state = state.filter((item) => item.id !== action.payload)
return state
}
}
});
export const store = configureStore({
reducer: {
product: productSlice.reducer
} })
export const {addProduct,toggleProduct,deleteProduct}=productSlice.action
INDEX
src -> index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
APP
src -> App.js
import './App.css';
import Products from './components/Products';
import { Provider } from 'react-redux';
import { store } from './redux';
import {Routes ,Route} from 'react-router-dom'
import AddProduct from './components/AddProduct';
import UpdateProduct from './components/UpdateProduct';
function App() {
return (
<Provider store={store}>
<div className="App">
<Routes>
<Route path='/' element={<Products/>} ></Route>
<Route path='/products' element={<Products/>} ></Route>
<Route path='/addproduct' element={<AddProduct/>} ></Route>
<Route path='/users' element={<Users/>} ></Route>
<Route path='/adduser' element={<AddUser/>} ></Route>
<Route path='/updateproduct/:id' element={<UpdateProduct />} ></Route>
<Route path='/updateuser/:id' element={<UpdateUser />} ></Route>
</Routes>
</div>
</Provider>
);}
export default App;
