Next.js Discord

Discord Forum

Best way to trigger something globally

Answered
Oriental Scops-Owl posted this in #help-forum
Open in Discord
Oriental Scops-OwlOP
Hi. i have a header component loaded within my main app layout component that keeps track of cart data fetched from cookies.

this is inside my main container : 

        <>
          <Header onOpenLocations={toggleLocationDialog} properties={properties} cart={cart}/>
          <main className={styles.appContainer}>{children}</main>
          <MobileNav onOpenLocations={toggleLocationDialog} />
          <Footer />
        </>



I need to somehow trigger a refresh of cart data from within the {children} component.

not sure how i would do this.. maybe context or redux? (i dont really use either that much and typically handle state management via drill propping}

any tips?
Answered by Oriental Scops-Owl
import { defaultCartState } from 'modules/cart/cart.constants'
import { ICartState } from 'modules/cart/cart.types'
import { createContext, useContext, useMemo, useState, Dispatch, SetStateAction } from 'react'

interface CartContextProps {
  cart: ICartState
  setCart: Dispatch<SetStateAction<ICartState>>
}

const CartContext = createContext<CartContextProps>({
  cart: defaultCartState,
  setCart: (prevState: SetStateAction<ICartState>) => prevState,
})

interface CartProviderProps {
  children: React.ReactNode
  initialValue: ICartState
}

function CartProvider({ initialValue, children }: CartProviderProps): JSX.Element {
  const [cart, setCart] = useState<ICartState>(initialValue ?? defaultCartState)

  const value = useMemo(() => ({ cart, setCart }), [cart, setCart])

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>
}

const CartConsumer = CartContext.Consumer

const useCart = () => useContext(CartContext)

export { CartProvider, CartConsumer, useCart }
View full answer

3 Replies

Oriental Scops-OwlOP
nvm.. i got it working with a context provider
Oriental Scops-OwlOP
import { defaultCartState } from 'modules/cart/cart.constants'
import { ICartState } from 'modules/cart/cart.types'
import { createContext, useContext, useMemo, useState, Dispatch, SetStateAction } from 'react'

interface CartContextProps {
  cart: ICartState
  setCart: Dispatch<SetStateAction<ICartState>>
}

const CartContext = createContext<CartContextProps>({
  cart: defaultCartState,
  setCart: (prevState: SetStateAction<ICartState>) => prevState,
})

interface CartProviderProps {
  children: React.ReactNode
  initialValue: ICartState
}

function CartProvider({ initialValue, children }: CartProviderProps): JSX.Element {
  const [cart, setCart] = useState<ICartState>(initialValue ?? defaultCartState)

  const value = useMemo(() => ({ cart, setCart }), [cart, setCart])

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>
}

const CartConsumer = CartContext.Consumer

const useCart = () => useContext(CartContext)

export { CartProvider, CartConsumer, useCart }
Answer
Jboncz
Yeah, the way to do it is through context provider Good job! 🙂