I'm starting redux with react, I can't change the quantity of an item in my cart, I've tried quite a few things I saw on the forum, but it doesn't work. I am using for useDispatch and useSelector with redux.When I try to change the quantity I cannot change the value of the quantity.Thank you for help

page basket:

import { useSelector, useDispatch } from 'react-redux';
import "../../css/Panier.scss"

const Panier = () =>{
    const {quantite} = useSelector(state => state)
     console.log(quantite)
    const dispatch = useDispatch();
    const {panier} =useSelector(state => state)
    console.log(panier)
    const add = (id) =>{
        console.log(id)
            dispatch({
                type:  "ADDQUANTITY",
                id : id
            })
    }
    
    return (
        <div className='container_panier'>
            <div>
                <div className='header_panier'>
                    <h2 className='header_panier__h2'>Panier</h2>
                </div>
                <div className='container_command'>
                {panier.map((paniers) => 
                    <ul className='listBurger' key={paniers.id}>
                        <div className='container_command_panier_image'>
                            <img className='container_command_panier_images' src= {paniers.image} />
                        </div>
                        <div className='panier-text'>
                            <li className='panier-text_menu'>{ paniers.burger }</li>
                            <li className='panier-text_menu'>{ paniers.prix } €</li>
                            <li className='panier-text_menu'>{quantite}</li>
                            <div>
                                <button onClick={()=>add(panier)} > </button> 
                            
                            </div>
                        </div>
                    </ul>    
                )}
                </div>
            </div>       
        </div>
    )  
}

export default Panier;

Page Reducer

const initialState = {
    cardFinal:" ",
    prix:"",
    plats: [
        {id: 1, burger: "Giant", image: giant,prix: "4.90"},
        {id: 2, burger: "fish",image: Fish, prix: "5.20"},
        {id: 3, burger: "chicken", image: lchicken prix: "6.10"},
        {id: 4, burger: "Lacon", image: lbacon prix: "5.90"},
        {id: 5, burger: "chicken dips", image: cchicken prix: "4.50"},
    ],

   panier: [],
    prixFinal: 0,
    quantite: 0,
}

/export default function (state = initialState, action = {}) {

    console.log(state.panier)
    switch (action.type) {

        case "ADDQUANTITES":
            let newPanier = [...state.panier]
            let itemIndex = state.panier.findIndex(obj => obj.id === action.payload.id)
            let currentItem = state.panier[itemIndex]

            if(currentItem){
                currentItem.quantite = parseInt(currentItem.quantite)  1
                state.panier[itemIndex] = currentItem;
                newPanier = [...state.panier]

            }else{
                newPanier = newPanier.concat(action.payload)
                console.log(newPanier)
            }
            return{
                panier: newPanier
        }
       default: return state
    }
}

CodePudding user response：

1- Your action types are not equal in the component and the reducer function ( "ADDQUANTITY" and "ADDQUANTITES"), this means you aren't dispatching any action and the reducer is returning the default state.

2 - Your dispatch doesn't have a payload value, you are adding 'id' only, it should be '({ type: "ADDQUANTITES"", payload : { id: id }}).

3 - The returned object from your action is returning only the 'panier' object, you should return the whole state and the newPanier object as such: return { ...state, panier: neePanier }