Блог

Я начал изучать Redux с React, я застрял в части своего проекта, которая представляет собой магазин фильмов, в котором, когда пользователь выбирает количество билетов и нажимает «Добавить в корзину», я хочу обновить количество и добавить фильм в сумку.

Я реализовал некоторые исправления в своем коде, но функции не работают?

А ты как думаешь?

lt;— Постоянная—gt;

 export const ActionsTypes = {  SET_MOVIES : "SET_MOVIES",  GET_MOVIE : "GET_MOVIE",   REMOVE_MOVIE : "REMOVE_MOVIE",  QUANTITY: "QUANTITY",  ADD_PRODUCT : "ADD_PRODUCT",  }  

lt;— Мои Действия —gt;

 import {ActionsTypes} from "../Constants/ActionsTypes";   // create actions functions export const setMovies = (movies)=gt; {  return {  type : ActionsTypes.SET_MOVIES,  payload : movies,  } }   export const getMovie = (movie) =gt; {  return {  type : ActionsTypes.GET_MOVIE,  payload: movie,  }  }  export const removeMovie = () =gt; {  return {  type : ActionsTypes.REMOVE_MOVIE,  } }   export const AddProduct = (singleMovie) =gt; {  return {  type : ActionsTypes.ADD_PRODUCT,  payload: singleMovie,  } }  

lt;— Редукторы —gt;

 import { ActionsTypes } from "../Constants/ActionsTypes";   const initialState = {  movies: [],  quantity :0,  };      // Reducers function takes two arguments state, action    //Movies Reducers  export const setMoviesReducers = (state = initialState, action) =gt; {  switch (action.type) {  case ActionsTypes.SET_MOVIES:  return {...state, movies: action.payload }  default:  return state;  }  }    // single Movies Reducers  export const GetMovieDetailsReducers = (state={}, action) =gt; {  switch(action.type) {  case ActionsTypes.GET_MOVIE :   return {...state, ...action.payload}  case ActionsTypes.REMOVE_MOVIE :   return {};  default :   return state;  }    }    // Add to card and Quatity reducers  export const AddMovieToCart = (state = initialState, action) =gt; {  switch (action.type) {  case ActionsTypes.ADD_PRODUCT :  return {...state, quantity: state.quantity 1, products:[...state.products,action.payload]};  default :   return state;  }    }  

lt;— Combine reducers—gt;

 import {combineReducers} from "redux"; import { setMoviesReducers, GetMovieDetailsReducers, AddMovieToCart} from "./MoviesReducers";   export const reducers = combineReducers({  allMovies : setMoviesReducers,  movie : GetMovieDetailsReducers,  addToCart : AddMovieToCart, });  

lt;— Movie details component—gt;

 import React, {useEffect, useState} from 'react' import { Add, Remove } from '@material-ui/icons'; import './MovieDetails.css'; import { useSelector, useDispatch } from 'react-redux'; import { useParams } from 'react-router'; import { getMovie, removeMovie, AddProduct} from '../../Redux/Actions/Actions';  import axios from 'axios';  const MovieDetails = () =gt; {  const [quantity, setQuantity] = useState(1)  const singleMovie = useSelector((state)=gt; state.movie);  const addToCardProduct = useSelector((state)=gt; state.addToCart);  console.log(addToCardProduct);   const {title, poster_path, overview} = singleMovie;  const dispatch = useDispatch();  let {movieId} = useParams();  console.log(movieId);   // Handle Quantity  const handleQuantity = (type) =gt; {  if(type === "dec") {  quantity gt; 1 amp;amp; setQuantity(quantity - 1)  } else {  setQuantity(quantity   1)  }  }   // add to cart Handler  const CartHandler = () =gt; {  dispatch(addToCardProduct);  }    // Get a single Product amp; Remove product  useEffect(()=gt; {  try {  const getSingleMovie = async () =gt; {  const request = await axios.get(`https://api.themoviedb.org/3/movie/${movieId});  const response = await request.data;  dispatch(getMovie(response))  }   getSingleMovie();   } catch(error) {  console.log(`ERROR : ${error}`)  }   //Clean up  return () =gt; {  dispatch(removeMovie());  }    }, [movieId])    return (  lt;section className="movieDetails_container"gt;  lt;div className="wrapper"gt;  lt;div className="img-container"gt;  lt;img src={`${ImgPath}`   poster_path} alt={title}/gt;  lt;/divgt;   lt;div className="info-container"gt;  lt;h1gt;{title}lt;/h1gt;  lt;pgt;{overview}lt;/pgt;  lt;div className="quantity-container"gt;  lt;Remove className="quantity-icon" onClick={()=gt; handleQuantity("dec")}/gt;  lt;span className="amount"gt;{quantity}lt;/spangt;  lt;Add className="quantity-icon" onClick={()=gt; handleQuantity("incr")}/gt;  lt;/divgt;  lt;button className="btn-add" onClick={CartHandler} gt;Add To Cartlt;/buttongt;  lt;/divgt;    lt;/divgt;   lt;/sectiongt;  ) }  export default MovieDetails  

lt;—Панель навигации, где у меня есть значок моей сумки и где я хочу показать количество—gt;

 import React from 'react' import './Navbar.css'; import { Link } from 'react-router-dom'; import { Badge } from '@material-ui/core'; import { LocalMall } from '@material-ui/icons'; import { useSelector } from 'react-redux';  const Navbar = () =gt; {  const quantityBag = useSelector((state)=gt; state.quantity);  return (  lt;nav className="navBar-section"gt;  lt;Link to="/"gt;  lt;div className="logo-container"gt;  lt;img className="logo" src="./Pictures/warner-bros.png" alt="Logo"/gt;  lt;/divgt;  lt;/Linkgt;   lt;Badge badgeContent={0} color="primary"gt;  lt;LocalMall className="icon-bag" /gt;  lt;/Badgegt;  lt;/navgt;  ) }  export default Navbar