J'essaie de créer un panier. J'ai créé un contexte et passé l'état comme valeur en appuyant sur les boutons d'incrémentation et de décrémentation du panier, mon nombre d'articles change mais lorsque j'utilise le même contexte dans le composant de la barre de navigation, dans le panier, le nombre total d'articles ne changera pas . Je joins l'extrait de code ci-dessous

C'est là que je crée le contexte

const initialState:initialType = {
  cartItems:cartItems,
  totalItems:cartItems.reduce((accumulator, object) => {
    return accumulator + object.quantity
  }, 0),
  totalAmount:0
}

export const CartContext = createContext<initialType|null>(initialState);

Vous trouverez ci-dessous mon fournisseur useContext.

<CartContext.Provider value={{...state}}>

<ContextCart removeItems={removeItems} increment={increment} decrement={decrement}/> </CartContext.Provider>

La valeur du statut provient de useReducer et il se met à jour, tout va bien

C'est ainsi que j'utilise useContext Hook dans la barre de navigation pour obtenir le nombre total d'articles dans le panier

const cartItems = useContext(CartContext);

return (
  <div>{cartItems.totalItems}</div>`
)

Mais chaque fois que le statut change, la barre de navigation ne restitue pas le nombre total mis à jour d'articles dans le panier, aidez-moi s'il vous plaît.

Voici ma fonction useReducer et tout ce qu'elle met à jour. J'ai vérifié sa fonctionnalité en exécutant console.log(). Tout ce qu'il renvoie est correct, y compris state.totalItems.

type actionType={
      type:string,
      payload:string
    }
    export const reducer = (state:initialType ,action:actionType) => {
      if(action.type === "Delete" ){
        return {
          ...state,
          cartItems:state.cartItems.filter((currentElement)=>{
            return currentElement.id != action.payload
          })
        }
      }
       if (action.type === 'increment'){
          state.cartItems.forEach((element)=>{
            if (element.id === action.payload){
              element.quantity++;
              state.totalItems++
            }
          })
         
          return {...state};
          
      }
      if (action.type === 'decrement'){
        state.cartItems.forEach((element)=>{
          if (element.id === action.payload){
            element.quantity--;
            state.totalItems--;
          }
        })
        console.log(state)
        return {...state};
      }
      return {...state};
    }```