Scribd Logo
Upload

Welcome to Scribd!

  • 38 views

    Crud React Redux

    Uploaded by

    oussamatb05

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Crud React Redux

    Uploaded by

    oussamatb05
    38 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    38 views5 pages

    Crud React Redux

    Uploaded by

    oussamatb05

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 5

    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;

    You might also like