How can I implement Redux in React correctly - reactjs

Question

I've started to learn Redux with React, I got stuck in a part of my project which is a movies store that when the user chooses the number of tickets and clicks on add to cart I want to update the quantity and add the movie to the bag.
I implemented some redux in my code but the functionalities are not working?
What do you think?
<-- Constant-->
export const ActionsTypes = {
SET_MOVIES : "SET_MOVIES",
GET_MOVIE : "GET_MOVIE",
REMOVE_MOVIE : "REMOVE_MOVIE",
QUANTITY: "QUANTITY",
ADD_PRODUCT : "ADD_PRODUCT",
}
<-- My Actions -->
import {ActionsTypes} from "../Constants/ActionsTypes";
// create actions functions
export const setMovies = (movies)=> {
return {
type : ActionsTypes.SET_MOVIES,
payload : movies,
}
}
export const getMovie = (movie) => {
return {
type : ActionsTypes.GET_MOVIE,
payload: movie,
}
}
export const removeMovie = () => {
return {
type : ActionsTypes.REMOVE_MOVIE,
}
}
export const AddProduct = (singleMovie) => {
return {
type : ActionsTypes.ADD_PRODUCT,
payload: singleMovie,
}
}
<-- Reducers --->
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) => {
switch (action.type) {
case ActionsTypes.SET_MOVIES:
return {...state, movies: action.payload }
default:
return state;
}
}
// single Movies Reducers
export const GetMovieDetailsReducers = (state={}, action) => {
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) => {
switch (action.type) {
case ActionsTypes.ADD_PRODUCT :
return {...state, quantity: state.quantity+1, products:[...state.products,action.payload]};
default :
return state;
}
}
<-- Combine reducers-->
import {combineReducers} from "redux";
import { setMoviesReducers, GetMovieDetailsReducers, AddMovieToCart} from "./MoviesReducers";
export const reducers = combineReducers({
allMovies : setMoviesReducers,
movie : GetMovieDetailsReducers,
addToCart : AddMovieToCart,
});
<-- Movie details component-->
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 = () => {
const [quantity, setQuantity] = useState(1)
const singleMovie = useSelector((state)=> state.movie);
const addToCardProduct = useSelector((state)=> 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) => {
if(type === "dec") {
quantity > 1 && setQuantity(quantity - 1)
} else {
setQuantity(quantity + 1)
}
}
// add to cart Handler
const CartHandler = () => {
dispatch(addToCardProduct);
}
// Get a single Product & Remove product
useEffect(()=> {
try {
const getSingleMovie = async () => {
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 () => {
dispatch(removeMovie());
}
}, [movieId])
return (
<section className="movieDetails_container">
<div className="wrapper">
<div className="img-container">
<img src={`${ImgPath}` + poster_path} alt={title}/>
</div>
<div className="info-container">
<h1>{title}</h1>
<p>{overview}</p>
<div className="quantity-container">
<Remove className="quantity-icon" onClick={()=> handleQuantity("dec")}/>
<span className="amount">{quantity}</span>
<Add className="quantity-icon" onClick={()=> handleQuantity("incr")}/>
</div>
<button className="btn-add" onClick={CartHandler} >Add To Cart</button>
</div>
</div>
</section>
)
}
export default MovieDetails
<---Navbar where I have my bag icon and where I want to show the quantity-->
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 = () => {
const quantityBag = useSelector((state)=> state.quantity);
return (
<nav className="navBar-section">
<Link to="/">
<div className="logo-container">
<img className="logo" src="./Pictures/warner-bros.png" alt="Logo"/>
</div>
</Link>
<Badge badgeContent={0} color="primary">
<LocalMall className="icon-bag" />
</Badge>
</nav>
)
}
export default Navbar