SHARE
TWEET

Redux, React Router Issue

a guest Mar 26th, 2020 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. App component:
  2.  
  3. ...other imports
  4. function App() {
  5.   return (
  6.     <>
  7.       <GlobalStyling />
  8.  
  9.       <Router>
  10.         <ScrollToTop />
  11.         <Layout>
  12.           <Switch>
  13.             <Route exact path="/" component={Art} />
  14.  
  15.             <Route exact path="/about" component={About} />
  16.             <Route exact path="/contact" component={Contact} />
  17.             <Route exact path="/privacy" component={Privacy} />
  18.             <Route exact path="/help" component={Help} />
  19.            
  20.             <Route exact path="/cart" component={Cart} />
  21.             <Route
  22.               component={localStorage.jwtTokenSchroeders ? Art : NotFound}
  23.             />
  24.           </Switch>
  25.         </Layout>
  26.       </Router>
  27.     </>
  28.   );
  29. }
  30.  
  31. export default App;
  32.  
  33. ----------------------------------------------
  34.  
  35. Cart Component:
  36.  
  37. const Cart = props => {
  38.   const { newProduct, productToRemove, productToChange } = props;
  39.   const prevNewProduct = usePrevious(newProduct);
  40.   const prevProductToRemove = usePrevious(productToRemove);
  41.   const prevProductToChange = usePrevious(productToChange);
  42.  
  43.   useEffect(() => {
  44.     if (prevNewProduct !== newProduct) {
  45.       addProductHandler(newProduct);
  46.     }
  47.   }, [newProduct]);
  48.   useEffect(() => {
  49.     if (prevProductToRemove !== productToRemove) {
  50.       removeProductHandler(productToRemove);
  51.     }
  52.   }, [productToRemove]);
  53.  
  54.   useEffect(() => {
  55.     if (prevProductToChange !== productToChange) {
  56.       changeProductQuantityHandler(productToChange);
  57.     }
  58.   }, [productToChange]);
  59.  
  60.   const addProductHandler = product => {
  61.     const { cartProducts, updateCart } = props;
  62.     let productAlreadyInCart = false;
  63.  
  64.     cartProducts.forEach(cp => {
  65.       if (cp.id === product.id) {
  66.         cp.quantity += product.quantity;
  67.         productAlreadyInCart = true;
  68.       }
  69.     });
  70.  
  71.     if (!productAlreadyInCart) {
  72.       cartProducts.push(product);
  73.     }
  74.  
  75.     updateCart(cartProducts);
  76.   };
  77.  
  78.   const removeProductHandler = product => {
  79.     const { cartProducts, updateCart } = props;
  80.  
  81.     const index = cartProducts.findIndex(p => p.id === product.id);
  82.     if (index >= 0) {
  83.       cartProducts.splice(index, 1);
  84.       updateCart(cartProducts);
  85.     }
  86.   };
  87.  
  88.   const changeProductQuantityHandler = changedProduct => {
  89.     const { cartProducts, updateCart } = props;
  90.  
  91.     const product = cartProducts.find(p => p.id === changedProduct.id);
  92.     product.quantity = changedProduct.quantity;
  93.     if (product.quantity <= 0) {
  94.       removeProductHandler(product);
  95.     }
  96.     updateCart(cartProducts);
  97.   };
  98.  
  99.   const products = props.cartProducts.map(p => {
  100.     return (
  101.       <CartProduct
  102.         product={p}
  103.         removeProduct={props.removeProduct}
  104.         changeProductQuantity={props.changeProductQuantity}
  105.         key={p.id}
  106.       />
  107.     );
  108.   });
  109.  
  110.   return (
  111.     <>
  112.       <CartView>
  113.         {products}
  114.         {!products.length && (
  115.           <p>
  116.             Add some products in the cart <br />
  117.             :)
  118.           </p>
  119.         )}
  120.       </CartView>
  121.     </>
  122.   );
  123. };
  124.  
  125. -----------------------------------------------
  126.  
  127. Cart Actions:
  128.  
  129. import {
  130.   LOAD_CART,
  131.   ADD_PRODUCT,
  132.   REMOVE_PRODUCT,
  133.   CHANGE_PRODUCT_QUANTITY
  134. } from "./actionTypes";
  135.  
  136. export const loadCart = products => ({
  137.   type: LOAD_CART,
  138.   payload: products
  139. });
  140.  
  141. export const addProduct = product => ({
  142.   type: ADD_PRODUCT,
  143.   payload: product
  144. });
  145.  
  146. export const removeProduct = product => ({
  147.   type: REMOVE_PRODUCT,
  148.   payload: product
  149. });
  150.  
  151. export const changeProductQuantity = product => ({
  152.   type: CHANGE_PRODUCT_QUANTITY,
  153.   payload: product
  154. });
  155.  
  156. -------------------------------
  157.  
  158. Cart Reducer:
  159.  
  160. import {
  161.   LOAD_CART,
  162.   ADD_PRODUCT,
  163.   REMOVE_PRODUCT,
  164.   CHANGE_PRODUCT_QUANTITY
  165. } from "./actionTypes";
  166.  
  167. const initialState = {
  168.   products: []
  169. };
  170.  
  171. export default function(state = initialState, action) {
  172.   switch (action.type) {
  173.     case LOAD_CART:
  174.       return {
  175.         ...state,
  176.         products: action.payload
  177.       };
  178.     case ADD_PRODUCT:
  179.       return {
  180.         ...state,
  181.         productToAdd: Object.assign({}, action.payload)
  182.       };
  183.     case REMOVE_PRODUCT:
  184.       return {
  185.         ...state,
  186.         productToRemove: Object.assign({}, action.payload)
  187.       };
  188.     case CHANGE_PRODUCT_QUANTITY:
  189.       return {
  190.         ...state,
  191.         productToChange: Object.assign({}, action.payload)
  192.       };
  193.     default:
  194.       return state;
  195.   }
  196. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top